Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / NewStats: 3,194,061 members, 7,953,199 topics. Date: Thursday, 19 September 2024 at 12:19 PM |
Nairaland Forum / Science/Technology / Programming / Mobile Technology: Lets Build A Mobile App With Javascript (16050 Views)
July Bootcamp Training - Full Stack Web Development With Javascript (mern Stack) / Tarot Website I Cooked With JavaScript,HTML / My Semester GPA Calculator With Javascript (2) (3) (4)
(1) (2) (3) (4) (5) (6) (7) (8) (Reply) (Go Down)
Re: Mobile Technology: Lets Build A Mobile App With Javascript by Lordpeckxy(m): 7:01am On Jan 07, 2020 |
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, 2020 |
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, 2020 |
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, 2020 |
drop shots... make improvements |
Re: Mobile Technology: Lets Build A Mobile App With Javascript by Lordpeckxy(m): 6:20am On Jan 23, 2020 |
[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, 2020 |
OSE app: an online editor |
Re: Mobile Technology: Lets Build A Mobile App With Javascript by Lordpeckxy(m): 6:28am On Jan 23, 2020 |
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, 2020 |
Lordpeckxy:Cool. |
Re: Mobile Technology: Lets Build A Mobile App With Javascript by Nobody: 4:06pm On Mar 26, 2020 |
Re: Mobile Technology: Lets Build A Mobile App With Javascript by Lordpeckxy(m): 7:30am On Apr 01, 2020 |
During this Lockdown... Trust Me It would'nt be bad Idea to code a simple calculator with JavaScript..... . So hope on, on the ride, as we Implement a simple Calculator. . Perequisite: Knowledge of HTML, CSS and JavaScript. |
Re: Mobile Technology: Lets Build A Mobile App With Javascript by Lordpeckxy(m): 11:54am On Apr 01, 2020 |
HTML: <!doctype html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" </meta> <link rel="stylesheet" href="styleCalculator.css"> <title>Nairaland Calculator</title> </head> <script> </script> </head> <body> <center> <div id="container"> <div id="screen"> <marquee scrollamount="2"> <b id="app-title"> Nairaland Digital Calculator </b> </marquee> <br> <br> <form name="screen"> <input type ="textfield" id="field" name="ans" value=""> <input type="reset" value="reset" id="reset"> </form> </div> <form name= "button"> <input type="button" id="button" name="1"value="1" onClick="document.screen.ans.value+='1'"> <input type="button" id="button" name="2" value="2" onClick="document.screen.ans.value+='2'"> <input type="button" id="button" name="3" value="3" onClick="document.screen.ans.value+='3'"> <input type="button" id="button" name="add" value="+" onClick="document.screen.ans.value+='+'"> <input type="button" id="button" name="4" value="4" onClick="document.screen.ans.value+='4'"> <input type="button" id="button" name="5" value="5" onClick="document.screen.ans.value+='5'"> <input type="button" id="button" name="6" value="6" onClick="document.screen.ans.value+='6'"> <input type="button" id="button" name="subtract" value="-" onClick="document.screen.ans.value+='-'"> <input type="button" id="button" name="7" value="7" onClick="document.screen.ans.value+='7'"> <input type="button" id="button" name="8" value="8" onClick="document.screen.ans.value+='8'"> <input type="button" id="button" name="9" value="9" onClick="document.screen.ans.value+='9'"> <input type="button" id="button" name="divide" value="/" onClick="document.screen.ans.value+='/'"> <input type="button" id="button" name="0" value="0" onClick="document.screen.ans.value+='0'"> <input type="button" id="button" name="multiply" value="*" onClick="document.screen.ans.value+='*'"> <input type="button" id="button" name="equals" value="=" onClick="document.screen.ans.value=eval(document.screen.ans.value)"> </form> <small id="footnote">CALCULATOR IMPLEMENTED <br> BY <br> LORDPECKXY</small> </center> </div> </body> </html> 1 Like |
Re: Mobile Technology: Lets Build A Mobile App With Javascript by Lordpeckxy(m): 11:57am On Apr 01, 2020 |
CSS:
body{
padding:5px;
background-color:rgba(95, 177, 19, 0);
} #app-title{ color:rgba(255, 0, 0, 0.383); } #container{ width:300px; height:400px; background:rgb(70, 211, 117); position:relative; } #screen{ width:300px; height:75px; background:rgb(165, 199, 72); position:relative; } #field { border-style: groove; width: 200px; height:22px; } #reset { width:60px; height:25px; background-color:red; } #button{ border-style: groove; width:70px; height:60px; background-color:rgba(112, 112, 112, 0.726); color:rgb(2, 68, 0); text-align:center; } #button:hover { color:rgb(0, 247, 255); background-color: transparent; font-size: 14px; font-weight: bold; } #field:hover { border-color: rgba(112, 112, 112, 0.726); font-weight:bold; color:red; } #reset:hover { text-transform: uppercase; font-weight: bold; } #footnote { color:grey; } 1 Like |
Re: Mobile Technology: Lets Build A Mobile App With Javascript by Lordpeckxy(m): 11:57am On Apr 01, 2020 |
CSS:
body{
padding:5px;
background-color:rgba(95, 177, 19, 0);
} #app-title{ color:rgba(255, 0, 0, 0.383); } #container{ width:300px; height:400px; background:rgb(70, 211, 117); position:relative; } #screen{ width:300px; height:75px; background:rgb(165, 199, 72); position:relative; } #field { border-style: groove; width: 200px; height:22px; } #reset { width:60px; height:25px; background-color:red; } #button{ border-style: groove; width:70px; height:60px; background-color:rgba(112, 112, 112, 0.726); color:rgb(2, 68, 0); text-align:center; } #button:hover { color:rgb(0, 247, 255); background-color: transparent; font-size: 14px; font-weight: bold; } #field:hover { border-color: rgba(112, 112, 112, 0.726); font-weight:bold; color:red; } #reset:hover { text-transform: uppercase; font-weight: bold; } #footnote { color:grey; } |
Re: Mobile Technology: Lets Build A Mobile App With Javascript by Lordpeckxy(m): 12:00pm On Apr 01, 2020 |
screenshots 1 Share
|
Re: Mobile Technology: Lets Build A Mobile App With Javascript by Lordpeckxy(m): 12:01pm On Apr 01, 2020 |
HTML
|
Re: Mobile Technology: Lets Build A Mobile App With Javascript by salvationproject(m): 8:53am On Apr 02, 2020 |
wow |
Re: Mobile Technology: Lets Build A Mobile App With Javascript by Lordpeckxy(m): 2:38am On Apr 03, 2020 |
how about a Body Mass Index Calculator?
Next App Loading...
I call it ISBC ( Implemented Body Mass Index Calculator )
Screenshots and Source Program Coming up shortly 1 Like |
Re: Mobile Technology: Lets Build A Mobile App With Javascript by Lordpeckxy(m): 2:50am On Apr 03, 2020 |
HTML: . . . <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="styleBMI.css"> </link> <title> BMI </title> </head> <body> <center> <div id="container"> <center> <div id="pane"> <b id="app-title"> IBSC </b> <marquee scrollamount="2.5">Calculate Your Body Mass Index With IBSC App</marquee> </div> </center> <center> <input type="text" id="nameBox" placeholder="Your Name" required> </center> <br> <label id="put1">WEIGHT (KG) </label> <label id="put2" align="right">HEIGHT (CM) </label> <input type="number" id="weightBox" required> <input type="number" id="heightBox" required> <br> <center> <br> <input type="button" id="compute-button" value="COMPUTE"> </center> <br> <center> <label id="BMI"> BMI VALUE: </label> <br> <div id="BMI-value"> 0.00 </div> </center> <br> <br> <center> <div id="msg"> Message To User: </div> </center> <br> <marquee scrollamount="1.5" loop="2">Implemented Body Mass Index System Calculator </marquee> <marquee scrollamount="1.5" direction="right" loop="2">Developer: Lord-Peckxy</marquee> </div> </center> <script src="BMIScript.js"> </script> </body> </html> 1 Like |
Re: Mobile Technology: Lets Build A Mobile App With Javascript by Lordpeckxy(m): 2:52am On Apr 03, 2020 |
CSS:
.
.
.
body {
padding: 5px;
background-color: pink;
} #container{ width:350px; height:490px; background:rgb(113, 187, 138); position:relative; } #pane{ width:350px; height:70px; background:rgb(95, 161, 161); position:relative; } #app-title{ color:rgba(104, 104, 104, 0.972); font-size:40px; font-weight: bold; } #put1 { color:rgba(104, 104, 104, 0.972); font-size:18px; font-weight: bold; margin-left: 15px; } #put2 { color:rgba(104, 104, 104, 0.972); font-size:18px; font-weight: bold; margin-left:70px; } #nameBox { border-style: ridge; font-weight: bold; width: 110px; height: 20px; text-align: center; } #weightBox { border-style: ridge; font-weight: bold; margin-left: 38px; margin-top: 10px; width: 60px; height: 20px; text-align: center; } #heightBox{ border-style: ridge; font-weight: bold; margin-left: 130px; width: 60px; height: 20px; text-align: center; } #compute-button{ border-style: ridge; background-color: rgba(0, 189, 126, 0.767); color:rgba(206, 206, 206, 0.972); font-size:16px; font-weight: lighter; } #BMI{ color:rgba(104, 104, 104, 0.972); font-size:18px; font-weight: bold; } #BMI-value{ background-color: rgb(5, 122, 83); color:rgba(255, 255, 255, 255); font-size:40px; font-weight: bold; width: 80px; height: 56px; } #msg{ background-color: rgb(5, 122, 83); color: rgb(240, 145, 89); font-size:17px; font-weight: bold; width: 350px; height: 110px; } marquee { color: red; font-weight: bold; } 1 Like |
Re: Mobile Technology: Lets Build A Mobile App With Javascript by Lordpeckxy(m): 2:54am On Apr 03, 2020 |
JavaScript: . . . . document.querySelector('#compute-button').addEventListener('click', function(){ var userName = document.getElementById('nameBox').value; var weight_Value = document.getElementById('weightBox').value; var height_Value = document.getElementById('heightBox').value; var BMI_value = weight_Value / height_Value / height_Value * 10000; var round_BMI = BMI_value.toFixed(1); document.getElementById('BMI-value').innerHTML = round_BMI; alert(round_BMI); if (round_BMI < 18.5) { document.getElementById('msg').innerHTML = userName + ' Your BMI Is ' + round_BMI + "<br>" + "You Are UnderWeight Consider Eating Good Foods, Fruits. <br> Avoid Too Much Stress And Always Have Constant Rest."; } else if (round_BMI >= 18.5 && round_BMI <= 24.9) { document.getElementById('msg').innerHTML = userName + ' Your BMI Is ' + round_BMI + "<br>" + "You Are of Normal Weight Keep Eating Good Foods, Fruits. <br> of Course Avoid Too Much Stress, Exercise And Always Have Constant Rest."; } else if(round_BMI > 30.0) { document.getElementById('msg').innerHTML = userName + ' Your BMI Is ' + round_BMI + "<br>" + "You Are Over Weight and Risk Been Obesed Advoid Junk Foods, Eat well prepared good Foods and Fruits. <br> Always Exercise to Reduce Body Fatness."; } }); 1 Like |
Re: Mobile Technology: Lets Build A Mobile App With Javascript by Lordpeckxy(m): 2:55am On Apr 03, 2020 |
ScreenShots 1 Like
|
Re: Mobile Technology: Lets Build A Mobile App With Javascript by Lordpeckxy(m): 2:57am On Apr 03, 2020 |
ScreenShots Developer: LordPeckxy 1 Like
|
Re: Mobile Technology: Lets Build A Mobile App With Javascript by Lordpeckxy(m): 3:01am On Apr 03, 2020 |
function tell() { if (stateLockdown() = true) { buildApp(); }else stop() } tell(); 1 Like |
Re: Mobile Technology: Lets Build A Mobile App With Javascript by Lordpeckxy(m): 3:03am On Apr 03, 2020 |
Next App Loading.... 23% |
Re: Mobile Technology: Lets Build A Mobile App With Javascript by Lordpeckxy(m): 8:33am On Apr 03, 2020 |
Still on LockDown....
Right, so am Thinking, Maybe a Kids E-Learner won't be so bad.
So errhmmm So lets Proceed, Still thinking the features I should Put In it.!!!!
.
So lets Jump Into the Bumpy Ride.!!
Copy and Review the Codes....
Maybe I will stop Posting the Codes and Start Uploading the Files....
Either Way, You get a Full Functional Web App Today....
#KEL APP loading.!!!
|
Re: Mobile Technology: Lets Build A Mobile App With Javascript by Lordpeckxy(m): 8:36am On Apr 03, 2020 |
#Lit....
Traditional Newbie Calculation Application
|
Re: Mobile Technology: Lets Build A Mobile App With Javascript by Lordpeckxy(m): 7:57pm On Apr 06, 2020 |
Just been down the dev lane, coding a new web app, Nevertheless, I still had time to prepare a GpCalc, With a nice UI, Using HTMl and CSS with JavaScript Powering the Functions, I call It IGPC (Implemented GradePoint Calculator).. Sit Back and Enjoy... Well I might not upload the codes today, I haven't wrapped It up... But others are sure coming..... So far we are still on the Basics....!!! 1 Like |
Re: Mobile Technology: Lets Build A Mobile App With Javascript by Nobody: 10:45am On Apr 07, 2020 |
Lordpeckxy: Boss I didn't get the html code for = |
Re: Mobile Technology: Lets Build A Mobile App With Javascript by Lordpeckxy(m): 7:01pm On Apr 07, 2020 |
ambitiouschap:I don't If am correct, but I did give every program/app I uploaded a name.? So code for which.? 1 Like |
Re: Mobile Technology: Lets Build A Mobile App With Javascript by codeigniter(m): 9:29pm On Apr 08, 2020 |
This is the app I developed last year when I had the goal to freelance but now that I know the rigour of developing apps for someone else and more over the Indians keep dragging the labour cost down. Let brainstorm on an economic viable idea that we could develop via github, at least it would teach us how to collaborate online and maybe we gain new friends or network. Mind u I have a project I am working on, but if this gain traction I could scrap it 1 Like
|
Re: Mobile Technology: Lets Build A Mobile App With Javascript by Grandlord: 3:09pm On Apr 09, 2020 |
codeigniter:What technology did you use for this? React native? Java? |
Re: Mobile Technology: Lets Build A Mobile App With Javascript by codeigniter(m): 5:33pm On Apr 09, 2020 |
Js phonegap compiled with Adobe build, If I am going to learn mobile frameworks or language I will prefer dart and flutter to react native though I am proficient in node.js and vanilla js, I think flutter will catch up and over take react native, to learn the basics is easy but acquiring third party packages, learning new functionalities no easy at all, not to talk of becoming expert, it is useless to learn two mobile frameworks so am looking forward to learning one very good one. What do u use and do u use it? |
(1) (2) (3) (4) (5) (6) (7) (8) (Reply)
Pictures Of My First Android App (comments And Suggestion Needed) / Software Developers Could Save Nigeria After Oil - Mark Essien / Interview Questions For A Software Developer !
(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 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 82 |