Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,149,951 members, 7,806,746 topics. Date: Tuesday, 23 April 2024 at 10:28 PM

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

Nairaland Forum / Science/Technology / Programming / Mobile Technology: Lets Build A Mobile App With Javascript (15525 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 Marvel1206: 7:57pm On Sep 23, 2019
Lordpeckxy:
[Js]
HTML CSS & JAVASCRIPT SOURCE PROGRAM

<!-- Programmed By Elugwaraonu Precious Izuchukwu -->
<!DOCTYPE html>
<html>
<head>
<title>SIMPLE INTEREST</title>

<style type="text/css">
#si {
font-family:cursive;
font-size:200%;
font-weight:bold;

}
</style>

<script type="text/javascript">
function SI() {
principal = document.getElementById("txt1"wink.value
rate = document.getElementById("txt2"wink.value
time = document.getElementById("txt3"wink.value
calc1 = principal * rate * time / 100
alert("SIMPLE INTERST IS " + calc1 );

document.getElementById("si"wink.innerHTML = "THE SIMPLE INTERST IS " + calc1

}
</script>
</head>
<body>
<h2 align="center" > <u> SIMPLE INTEREST PROGRAM </u> </h2>


<input type="text" id="txt1" placeholder="Principal" >

<input type="text" id="txt2" placeholder="Rate" >

<input type="text" id="txt3" placeholder="Time" >

<p align="center" >
<input type="button" id="btn1" value="CALCULATE" onclick="SI();" >
</p>

<p id="si" align="center" > </p>
</body>
</html>

NB: Please report any error/bug found in any of the written program.
.
Next: Screen shots
Good.
Next.
Abeg update more frequently
Re: Mobile Technology: Lets Build A Mobile App With Javascript by vheckthor1: 11:33pm On Sep 25, 2019
Nice work I am following
Re: Mobile Technology: Lets Build A Mobile App With Javascript by Lordpeckxy(m): 3:37am On Sep 28, 2019
Marvel1206:

Good.
Next.
Abeg update more frequently
am so sorry guys for not updating frequently, I will try my best on that aspect...
But all the same, is something that cannot be too...
.
let me leave man speech at that
.
The next Program I call it Random2Player
Re: Mobile Technology: Lets Build A Mobile App With Javascript by Lordpeckxy(m): 6:51am On Sep 30, 2019
Screen Shots of simple Interest

Re: Mobile Technology: Lets Build A Mobile App With Javascript by Lordpeckxy(m): 7:45am On Sep 30, 2019

[Js]
The Idea Is Start small, Grow Big...
Learning How to Manipulate simple programs will make you more proficient in designing a more stable application....
Example with a Simple Interest Calculator you the capability to develop a compound Interest, Tax deductor, Estimator, which gives you the Knowledge to build a government app...
.
Right on this platform, We will Implement a Governmental App that will perform various activities, study the simple Interest, Improve and Upload it for review...
Next you can go for compound Interest and different fianacial calculations....
.
Am going to upload a Grade Calculator Both the working and source-Program,
don't forget, start small, understand the Twerks and Grow Big...
[Js]

2 Likes

Re: Mobile Technology: Lets Build A Mobile App With Javascript by Lordpeckxy(m): 7:55am On Oct 01, 2019

[JS]
At the End of this week, we will Program our first Mobile App, Its going to be really Great and I will Teach you how to Turn it into a Desktop or an Android app....

Am going to try, every FortNight, we will try to program an app, while the week days I give you the component that makes the app...!!

Stay tune
Am Bringing some thing Up today...
.
When programming the app, i will walk you up to it step by step, with comments on My every Move, On my every Code, On my every Line...!!!
.
Whose Following.?

[JS]

4 Likes

Re: Mobile Technology: Lets Build A Mobile App With Javascript by Lordpeckxy(m): 8:09am On Oct 01, 2019

[Js]
I Once wrote this Program, when i first Started JavaScript....
Haa and Since then Its Been A Bumpy Ride...
.
If you want the source code of this program, Just download It Into your Files Manager, and ensure the Name still Remains GradeSoftware.HTML don't forget The .HTML extention.....
.
Look the content of the code, Its quite simple.[No comments though]

[Js]

2 Likes

Re: Mobile Technology: Lets Build A Mobile App With Javascript by nappy760(m): 9:34am On Oct 01, 2019
Lordpeckxy:

Screen Shots of simple Interest

My simple interest result is giving me 0 everytime undecided undecided
Re: Mobile Technology: Lets Build A Mobile App With Javascript by nappy760(m): 9:41am On Oct 01, 2019
And the input for the principal are side to side not on top each other as yours displays
Re: Mobile Technology: Lets Build A Mobile App With Javascript by tollyboy5(m): 10:59am On Oct 01, 2019
following
Re: Mobile Technology: Lets Build A Mobile App With Javascript by Lordpeckxy(m): 12:00am On Oct 03, 2019
nappy760:


My simple interest result is giving me 0 everytime undecided undecided

Your Code Is buggy...
Don't just try and copy paste all the codes to your editor, try to understand what they do, and if possible comment on it...
Send your code to this FB account Name - ELUGWARAONU PRECIOUS IZUCHUKWU for help
Re: Mobile Technology: Lets Build A Mobile App With Javascript by Lordpeckxy(m): 12:03am On Oct 03, 2019
nappy760:
And the input for the principal are side to side not on top each other as yours displays

It very well depends on the Device you are using for coding, I Like to use Sublime Text when am coding on my Pc and Anwriter when am tasting It on my android device, and often I mostly screen shots my android program... I once Told you Guys that a basic Knowledge Background on HTML, CSS and JavaScript Is Recommended, if that Knowledge was present It would be quite easy to define the markup.... . . . Anyway Just wrap up this <p> </p>(Paragraph) tag on each Input... Example

<p> <input type="text" id="txt1" placeholder="Principal" >
</p>

<p> <input type="text" id="txt2" placeholder="Rate" > </p>

<p> <input type="text" id="txt3" placeholder="Time" > </p>


<!-- The paragraph tag causes each Input to be on a New line -->
Re: Mobile Technology: Lets Build A Mobile App With Javascript by tollyboy5(m): 8:41am On Oct 03, 2019
Lordpeckxy:

[JS]
At the End of this week, we will Program our first Mobile App, Its going to be really Great and I will Teach you how to Turn it into a Desktop or an Android app....

Am going to try, every FortNight, we will try to program an app, while the week days I give you the component that makes the app...!!

Stay tune
Am Bringing some thing Up today...
.
When programming the app, i will walk you up to it step by step, with comments on My every Move, On my every Code, On my every Line...!!!
.
Whose Following.?

[JS]
this is the part I'm waiting for seriously
Re: Mobile Technology: Lets Build A Mobile App With Javascript by Lordpeckxy(m): 2:27pm On Oct 03, 2019

I don't think you Guys are ready 4 any real Life application, because Most of you dnt do you Homework, I told you back then to learn the basic of HTML, CSS and JavaScript, No you didn't Learn it and now you are complicating things.
We won't Move faster at this Rate. If you dnt know the basics of these Language, How can you Understand, Create and Improve Programs...
If you have an android device, Please Download the Sololearn app from Google Playstore,If you already familiar with it, well it won't hurt to refresh that Knowledge, If you dnt, then start from HTML, Progress through Css and then to javascript, dnt complicate things for you and I...

1 Like

Re: Mobile Technology: Lets Build A Mobile App With Javascript by Lordpeckxy(m): 2:30pm On Oct 03, 2019

Simple Interest Is (PRT/100) is the simplest program there is, and if e no dey enter now problem fit dey ooo...Because it aint gonna be funny when we are Designing and Developing the likes of, E-commerce App, Productivity App, Entertainment and Educational...I say you Bring yourself to speed Because Hell, its gonna be a bumpy ride...
.
.
.
I changed The program of this week to a new one, all a form of basic Math calculation(Don't worry its not hard math)...
I call It MATH PRODIGY...
First UI design of MATH PRODIGY coming By 10:30pm today...
By Heavens Grace we will be done by Sunday.!
And we enter a New one.!!!
Stay Tune.!!!
Re: Mobile Technology: Lets Build A Mobile App With Javascript by Lordpeckxy(m): 7:25am On Oct 04, 2019

[JS]
Now Before you Start coding...
Follow these steps...



* Create an empty folder and name it Math_Prodigy

* In these Folder, that where all the documents, files, and Program will be stored...

* Any Picture I use on the cause of writing the App, i will Upload in this forumn, or better still use yours for a different feel.!

* Anytime we are developing a new app, use this approach.!!

* In this app we are creating, we will be using external Js and likewise CSS and If they are not in the same directory, it won't or can't be accessed.

* so create your folder cause the first Markup experience is coming

[JS]

3 Likes

Re: Mobile Technology: Lets Build A Mobile App With Javascript by Lordpeckxy(m): 6:26am On Oct 05, 2019
MATH PRODIGY WIREFRAMING, STRUCTURING AND LABELLING
Re: Mobile Technology: Lets Build A Mobile App With Javascript by famuad: 6:00pm On Oct 05, 2019
Apply For Facebook Accelerator London Program 2019 for young African Entrepreneurs

It will close on October 18th, 2019

http://allyourfocus.com/facebook-accelerator-london-program-2019-for-african-entrepreneurs/
Re: Mobile Technology: Lets Build A Mobile App With Javascript by Marvel1206: 11:24pm On Oct 05, 2019
Lordpeckxy:


MATH PRODIGY
WIREFRAMING, STRUCTURING AND LABELLING
Waiting
Re: Mobile Technology: Lets Build A Mobile App With Javascript by renaissance(m): 8:24am On Oct 06, 2019
Sitting
Re: Mobile Technology: Lets Build A Mobile App With Javascript by Lordpeckxy(m): 10:00am On Oct 06, 2019
Wire 1

Re: Mobile Technology: Lets Build A Mobile App With Javascript by Lordpeckxy(m): 10:28am On Oct 06, 2019
Wire2 - sketch of how our programmed app will look like
Re: Mobile Technology: Lets Build A Mobile App With Javascript by Lordpeckxy(m): 10:57am On Oct 06, 2019
...

Re: Mobile Technology: Lets Build A Mobile App With Javascript by toby2all(m): 11:29am On Oct 06, 2019
@Lordpeckxy , I just stumbled on this thread. It's an amazing job you're doing here. I've bookmarked this thread already. Gladly awaiting your next update.
Re: Mobile Technology: Lets Build A Mobile App With Javascript by Lordpeckxy(m): 2:57am On Oct 07, 2019

Am Been slow --- Yes.
.
But It is a Gradual Process...

*Am posting the first Markup, If you don't understand any coding Lines(thou there are comments) tell me...

* I really don't know and still learning how to design an interface that can adapt to both desktop and mobile view, but since its a mobile app, i won't go into that branch of designing for Desktop...

* For a better Mobile webview experience, I recommend you download anWRITER in google playstore.!!

* Using a Laptop: Customize each codes to fit the required width and size of the laptop screen.!!

* G.U.I coming up.

Re: Mobile Technology: Lets Build A Mobile App With Javascript by Lordpeckxy(m): 6:31am On Oct 07, 2019
[Js]
<!-- Developer: Elugwaraonu Precious Izuchukwu -->
<!-- This document should be named as Main_Menu.html -->
<!-- This document should be kept in the Math_Prodigy file -->
<!-- Nairaland -->
<!DOCTYPE html>
<html>
<head>
<title>MATH PRODIGY</title>

<!-- Importing External stylesheet -->
<link rel="Stylesheet" href="Main_Menu_Style.css" >

</head>
<body>
<h1> MATH PRODIGY </h1>

<!-- creating navigational buttons with event handler -->
<section>
<!-- creating a button navigation -->
<a href="Prodigy_Programs.html" >
<input type="button" id="_start" value="START" onclick="">
</a>

<br> <!-- break -->

<input type="button" id="_option" value="OPTION" onclick="">

<input type="button" id="_exit" value="EXIT" onclick="">

</section>
</body>
</html>

[Js]
Re: Mobile Technology: Lets Build A Mobile App With Javascript by Lordpeckxy(m): 6:46am On Oct 07, 2019


[Js]
/* This is a different File */
/* This document should be named Main_Menu_Style.CSS */
/* This document should be kept in the appropriate file */
/* after downloading the image, it should be named deep_pink_sea.png */

/* styling the body document */
body {
background-image:url("deep_pink_sea.png"wink;
background-position:500px;
background-repeat:;
background-size:100%;
}

/* h1 tag */
h1 {
font-family:cursive;
font-size:50px;
text-align:center;
text-decoration:overline underline;
}

/* styling the button section */
section {
background-color:;
}

/* styling the start button */
#_start {
margin-left:110px;
margin-top:175px;
font-size:30px;
font-family:cursive;
font-weight:bolder;
background-image:url("deep_pink_sea.png"wink;;
color:silver;
}

/* styling the option button */
#_option {
margin-top:10px;
margin-right:145px;
font-size:20px;
font-weight:bold;
background-image:url("deep_pink_sea.png"wink;;
color:silver;
}

/* styling the exit button */
#_exit {
font-size:20px;
font-weight:bold;
background-image:url("deep_pink_sea.png"wink;
color:silver;

}

[Js]

2 Likes

Re: Mobile Technology: Lets Build A Mobile App With Javascript by Lordpeckxy(m): 7:01am On Oct 08, 2019

So basically, that is the first Menu design.....
The second comes up.!!!
Re: Mobile Technology: Lets Build A Mobile App With Javascript by Lordpeckxy(m): 10:01am On Oct 08, 2019
Math_Prodigy app pix
Re: Mobile Technology: Lets Build A Mobile App With Javascript by Lordpeckxy(m): 10:08am On Oct 08, 2019
.
Re: Mobile Technology: Lets Build A Mobile App With Javascript by nappy760(m): 10:53am On Oct 08, 2019
My pc is unavailable at the moment but once I get it I'll follow up on the tutorial

1 Like

Re: Mobile Technology: Lets Build A Mobile App With Javascript by nappy760(m): 8:21pm On Oct 08, 2019
Lordpeckxy:

Screen Shots of simple Interest

I am still troubleshooting my code o crys
Using chrome tools the value of principal , rate and time as at run time is null hence calc1 is giving me 0.
I am using Visual code as my editor .
I would have posted my code but having issues with phone and uploading . cry cry cry

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