Welcome, Guest: Join Nairaland / LOGIN! / Trending / Recent / New
Stats: 2,444,054 members, 5,502,911 topics. Date: Wednesday, 01 April 2020 at 03:48 AM

Mobile Technology: Lets Build A Mobile App With Javascript - Programming (5) - Nairaland

Nairaland Forum / Science/Technology / Programming / Mobile Technology: Lets Build A Mobile App With Javascript (6857 Views)

My Semester GPA Calculator With Javascript / Students Of Information Technology Lets Meet Here / Lets Build An App Together From Scratch.... Who's In? (2) (3) (4)

(1) (2) (3) (4) (5) (Reply) (Go Down)

Re: Mobile Technology: Lets Build A Mobile App With Javascript by Lordpeckxy(m): 7:01am On Jan 07
This is something I did, Just for Fun...

Re: Mobile Technology: Lets Build A Mobile App With Javascript by Lordpeckxy(m): 9:04pm On Jan 22
I can't believe I forgot this thread....wow, Not my fault so many projects....
Ok Let me give you guys something Small...
How about an Online Editor...
I believe you have taken your coding skills to the next Level.....
This Application I called OSE is a web App Just recently I did 4 a website, So Gonna Share It down Here....
.
Dont worry I didn't Forget the Age Program, but that Is a little to Mediocre.
.
So I call this one OSE(Online Synchronized Editor).
.
Drop by and check it out.!
Re: Mobile Technology: Lets Build A Mobile App With Javascript by Lordpeckxy(m): 6:16am On Jan 23
as promised this is OSE app
HTML:
Building #OSE app with Velokirapthor Precious
So guys this is the HTML and the CSS, I made a little tweak with the HTML so you can just update the other one with this one and also that thus code was designed on a laptop computer and the styling might not be responsive to mobile device, I.e three interface will not adjust well to a mobile device
OK
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="StyleSheet" href="Styleose.css">
<title> Online Synchronized Editor </title>
</head>

<div class="img-pane">
<img src="OSE.png">
</div>

<marquee> OSE app is an Online Editor that is used to edit and preview HTML and CSS codes </marquee>

<!-- text edit area -->
<div class="text-disp-pane">
<strong> Input Your Code Here: </strong>
<textarea> </textarea>
</div>

<!-- display code area -->
<div class="code-disp-pane">
<strong> Output: </strong>

</div>

<!-- buttons -->
<div class="btn-pane">
<button id="btn-func-1"> Func:1 </button>
<button id="btn-func2"> Func:2 </button>
<br>
<button id="btn-process"> Process </button>
<br>
<button id="btn-about"> About </button>
<button id="btn-clear-screen"> Clear Screen </button>
</body>
</div>

</html>

next CSS

Re: Mobile Technology: Lets Build A Mobile App With Javascript by Lordpeckxy(m): 6:17am On Jan 23
drop shots...
make improvements
Re: Mobile Technology: Lets Build A Mobile App With Javascript by Lordpeckxy(m): 6:20am On Jan 23
[b]
OSE app styling with CSS
body {
background-color: rgb(188, 218, 208);
}

.img-pane{
background-color: none;
}

.img-pane > img {
background-color: none;
height: 30px;
margin: 0px;
margin-left: 400px;
height: 50px;
width: 550px;
}

marquee {
color: rgb(255, 115, 1);
}

/* text area pane */
.text-disp-pane {
border-radius: 10px;
background-color: black;
background-size: 25%;
float: left;
text-align: center;
height: 500px;
width: 50%;
}

.text-disp-pane > strong {
color: red;
font-size: 15px;
text-align: center;
}

.text-disp-pane > textarea {
margin-top: 20px;
height: 430px;
width: 90%;
}

textarea:hover {
border-color: red;
background-color: rgb(200, 173, 173);
font-size: 15px;
font-weight: bolder;
}

/* display pane */
.code-disp-pane {
border-radius: 10px;
background-color: wheat;
float: inline-end;
height: 500px;
text-align: center;
}

.code-disp-pane > strong {
color: red;
}
.code-disp-pane > strong:hover {
text-decoration: underline;
}

.btn-pane {
float: none;
width: 80%;
}

.btn-pane > button {
border-style: groove;
border-radius: 5px;
background-color: black;
color: red;
float: none;
height:25px ;
width: 10%;
}

.btn-pane > button:hover {
cursor: pointer;
font-weight: bold;
text-transform: uppercase;
width: 13%;
}


#btn-func-1 {
margin-left: 300px;
}

#btn-func2 {
margin-left: 500px;
}

#btn-process {
margin-left: 600px;
}

#btn-clear-screen {
margin-left: 270px;
}

#btn-about {
margin-left: 400px;
}
[/b]

Re: Mobile Technology: Lets Build A Mobile App With Javascript by Lordpeckxy(m): 6:21am On Jan 23
OSE app: an online editor
Re: Mobile Technology: Lets Build A Mobile App With Javascript by Lordpeckxy(m): 6:28am On Jan 23
tell me what you think before I put up the JavaScript codes
Re: Mobile Technology: Lets Build A Mobile App With Javascript by Grandlord: 8:48am On Jan 24
Lordpeckxy:
I can't believe I forgot this thread....wow, Not my fault so many projects....
Ok Let me give you guys something Small...
How about an Online Editor...
I believe you have taken your coding skills to the next Level.....
This Application I called OSE is a web App Just recently I did 4 a website, So Gonna Share It down Here....
.
Dont worry I didn't Forget the Age Program, but that Is a little to Mediocre.
.
So I call this one OSE(Online Synchronized Editor).
.
Drop by and check it out.!
Cool. cool
Re: Mobile Technology: Lets Build A Mobile App With Javascript by Rockpen: 4:06pm On Mar 26
Grandlord:
Cool. cool

Nice one. Keep it coming.
There is no screenshot of the styling.

(1) (2) (3) (4) (5) (Reply)

My First Real PHP Based Website / Java Whatsapp Group Rebranded / *~ Omo-to-dun Voted Programming Section Poster Of The Year *~ Congratulations!!

(Go Up)

Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health
religion celebs tv-movies music-radio literature webmasters programming techmarket

Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10)

Nairaland - Copyright © 2005 - 2020 Oluwaseun Osewa. All rights reserved. See How To Advertise. 49
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.