Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,150,762 members, 7,809,929 topics. Date: Friday, 26 April 2024 at 05:25 PM

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 (15545 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:
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 Nobody: 4:06pm On Mar 26, 2020
Grandlord:
Cool. cool

Nice one. Keep it coming.
There is no screenshot of the styling.
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:
screenshots

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:

Boss I didn't get the html code for =
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:
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
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)

Function Points (FP) Vs Lines Of Code (LOC) / Eyeopener: Aspiring Nigerian Game/App Developers Should Read This / The Top 25 Global Finalist For NASA Space App: A Nairalander Represents Nigeria

(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. 67
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.