JavaScript - Any experience with it?

[rockyboy2018]

Hello Guys,

Could not find useful videos online to get a hold of it. There are but they are not addressing my problem set. I need to do an online assigment and I need some help with respect to this. If you have some idea please let me know.

I need to create a socreboard in the java script that shows a score card if Team 1 wins and then if Team 2 wins. Every time we refresh the page, it must show a different score

I am using Atom. I created index.js . But I am kind of stuck how to go about writing code as I had no previous programming knowledge.

Assignment:

In Atom, create an index.js in that same new project folder and write the code to solve the following challenge:

One team should be your home town, the other team can be any neighboring city;

Everytime you refresh the page, a random score for the upcoming game between the two teams should be generated by your script;

Each team can score from 0 to 5 goals per match;

The H1 should change as follows according to the result of the prophecy:
if team 1 wins:
"[name team 1] wins, [your name] will be happy!"
display the H1 in a color that you like;


if team 2 wins:
"[name team 2] wins, [your name] will be sad!"
display the H1 in a color that you don't like so much;

no winner: "Draw! No winner this time."
display the H1 in any other color;

I created css and html file in the folder but I need to write code in javascript.

If you can offer any help regarding this, I will really appreciate it.

 

[Bhaag Viru Bhaag]

You don't have any experience with programming? Do you know anything about variables, looping, arrays, conditionals, objects, classes?

 

[sweep_shot]

You can write this using conditional statements. Check here: https://www.w3schools.com/js/js_if_else.asp.

For random score, try random() method. Check here: https://www.w3schools.com/jsref/jsref_random.asp.

If you are completely new to JS, try this tutorial: https://www.youtube.com/watch?v=x2RNw4M6cME.

Also, share the source code for your JS (if you have written it).

 

[andy0204]

For Java,you need to know CPP.

 

[Bhaag Viru Bhaag]

For Java,you need to know CPP.

Bhaijan, he needs to write the code in Javascript not Java. And you don't need to know C++ to learn Java.

 

[rockyboy2018]

You don't have any experience with programming? Do you know anything about variables, looping, arrays, conditionals, objects, classes?

I m a business student so but my current course has some IT electives. We do not need thorough knowledge like computer science students. I studied variables, conditionals, objects etc I know all of this but more as a business student. For us, it is like having a bite than cooking if you know what I mean. Just touching upon some key concepts in IT.

If given a right source of study, I will try to figure it out by myself. I am just starting, the assignment is due in 10 days.

 

[sweep_shot]

 

[rockyboy2018]

You can write this using conditional statements. Check here: https://www.w3schools.com/js/js_if_else.asp.

For random score, try random() method. Check here: https://www.w3schools.com/jsref/jsref_random.asp.

If you are completely new to JS, try this tutorial: https://www.youtube.com/watch?v=x2RNw4M6cME.

Also, share the source code for your JS (if you have written it).

Thanks. I will share my source code if I get a handle of it.

 

[JaDed]

You can write this using conditional statements. Check here: https://www.w3schools.com/js/js_if_else.asp.

For random score, try random() method. Check here: https://www.w3schools.com/jsref/jsref_random.asp.

If you are completely new to JS, try this tutorial: https://www.youtube.com/watch?v=x2RNw4M6cME.

Also, share the source code for your JS (if you have written it).

And multiply the number generated by random.(only generates between 0 and 1)

 

[Bhaag Viru Bhaag]

Thanks. I will share my source code if I get a handle of it.

You don't have to use Atom for that. You can create a free account on codepen.io and write your code there and just share the link here.

 

[JaDed]

I have always disliked front end irrespective was your elective JS , as you are doing business wouldn't it had made sense to do something along analytical programming instead of front end.(R ?)

 

[Syed1]

Make your life easy and use Python.

 

[JaDed]

Make your life easy and use Python.

Brython? Is that any good instead of just using JS?

 

[Abdul]

function generateRandomScore () {
    return Math.floor(Math.random() * 5) // 5 is maximum value.
}

function checkWinner () {
    let myName = ''; // Change this value to your name.

    let home = {
        name: 'Toronto',
        score: generateRandomScore()
    };

    let other = {
        name: 'Vancouver',
        score: generateRandomScore()
    }

    if (home.score > other.score) {
        document.querySelector('.result').innerHTML = `${home.name} won! ${myName} will be happy.`
    } else if (home.score === other.score) {
        document.querySelector('.result').innerHTML = `Draw! No winner this time.`
    } else {
        document.querySelector('.result').innerHTML = `${home.name} lost! ${myName} will be sad!`
    }
}

checkWinner()

 

[Syed1]

Brython? Is that any good instead of just using JS?

https://x0it8vrvwa.execute-api.us-east-1.amazonaws.com/dev/

 

[Abdul]

I have always disliked front end irrespective was your elective JS , as you are doing business wouldn't it had made sense to do something along analytical programming instead of front end.(R ?)

Have you used Vue.js? It's amazing. I hated JS until I started using it. It's gaining popularity pretty quickly now, but it's still behind React and ahead of Angular.

 

[JaDed]

https://x0it8vrvwa.execute-api.us-east-1.amazonaws.com/dev/

Boostrap ok.. Are you trying to be a full stack python developer?

 

[Bhaag Viru Bhaag]

The maximum number of goals allowed per team is 5 so you have to set a range between that.

Here is a sample code :

function getScore(min, max) {
return Math.floor(Math.random() * (max-min)) + min;
}

let score = getScore(1, 6);

To display it on H1, assign it a class name or id and store that in a variable like this

In HTML :

In JS:
let scoreTitle = document.querySelector(".score-title");

scoreTitle.innerHTML = score;

Hope it helps.

 

[JaDed]

Have you used Vue.js? It's amazing. I hated JS until I started using it. It's gaining popularity pretty quickly now, but it's still behind React and ahead of Angular.

I'm an integration developer, my job is mostly on backend, I dislike front end but at best I tried React hated it as well, so might try Vue due to ease of learning but it would only be a passion learning no use as such for my current role neither am i interested in moving into front end full time.

 

[rockyboy2018]

I have always disliked front end irrespective was your elective JS , as you are doing business wouldn't it had made sense to do something along analytical programming instead of front end.(R ?)

E-Business & Web development is my elective.

 

[Bhaag Viru Bhaag]

In HTML:

add a class of 'score-title'

 

[Bhaag Viru Bhaag]

Have you used Vue.js? It's amazing. I hated JS until I started using it. It's gaining popularity pretty quickly now, but it's still behind React and ahead of Angular.

Vue is good but should be used only where it is necessary. For example using them on a small website is an overkill. They are good for large sites like FB, Insta and other big giants.

 

[Abdul]

I'm an integration developer, my job is mostly on backend, I dislike front end but at best I tried React hated it as well, so might try Vue due to ease of learning but it would only be a passion learning no use as such for my career..

Yeah, Vue is a lot simpler than React but very powerful. I have tried both and with React it took me 3-4 hours to make an effortless task list app. With Vue, it took 30 minutes.

 

[Syed1]

Boostrap ok.. Are you trying to be a full stack python developer?

No this was for some course. Using Python with Flask on AWS. If you want you could register and upload a receipt, it would parse the receipt and categorize it automatically using Machine Learning. May not work since it was just a course project and there were a few jugaars employed and also I'll get all your details on my AWS database


I work as an embedded software engineer, recently got a job building sonars for submarines.

 

[Bhaag Viru Bhaag]

I'm an integration developer, my job is mostly on backend, I dislike front end but at best I tried React hated it as well, so might try Vue due to ease of learning but it would only be a passion learning no use as such for my current role neither am i interested in moving into front end full time.

Learn Deno then.

 

[Abdul]

Vue is good but should be used only where it is necessary. For example using them on a small website is an overkill. They are good for large sites like FB, Insta and other big giants.

Same goes for other frameworks too though? If you're suggesting a framework less approach and going vanilla JavaScript then yeah, that makes sense but I always pull in Vue anyways because it's convenient to do so.

For CSS, I use Tailwind. Don't think I can ever go back to Bootstrap.

 

[Bhaag Viru Bhaag]

Same goes for other frameworks too though? If you're suggesting a framework less approach and going vanilla JavaScript then yeah, that makes sense but I always pull in Vue anyways because it's convenient to do so.

For CSS, I use Tailwind. Don't think I can ever go back to Bootstrap.

As long as you know the basics and can build apps from scratch there is nothing wrong in using Frameworks. Nobody wants to reinvent the wheel when it comes to programming. I have started learning React too. I only use Bootstrap for Grids nothing else. Before I used to built it from scratch.

 

[rockyboy2018]

Thanks Abdul actually seems like solved the whole assignment in one go. Thanks everyone for their inputs.

 

[Bhaag Viru Bhaag]

No this was for some course. Using Python with Flask on AWS. If you want you could register and upload a receipt, it would parse the receipt and categorize it automatically using Machine Learning. May not work since it was just a course project and there were a few jugaars employed and also I'll get all your details on my AWS database


I work as an embedded software engineer, recently got a job building sonars for submarines.

Bhai aap toh bahut pahuchi hui cheez nikle.

 

[JaDed]

No this was for some course. Using Python with Flask on AWS. If you want you could register and upload a receipt, it would parse the receipt and categorize it automatically using Machine Learning. May not work since it was just a course project and there were a few jugaars employed and also I'll get all your details on my AWS database


I work as an embedded software engineer, recently got a job building sonars for submarines.

Sounds very interesting... I would assume you use a lot of C++ though than Python, were you always into software remember you into something else before.

 

[rockyboy2018]

Abdul, when I am trying to run your code on codepen.io

I removed your comments and I defined my name there as per your instructions

I am gettimg this error message:

Uncaught TypeError: Cannot set property 'innerHTML' of null

What does it mean?

 

[Abdul]

Abdul, when I am trying to run your code on codepen.io

I removed your comments and I defined my name there as per your instructions

I am gettimg this error message:

Uncaught TypeError: Cannot set property 'innerHTML' of null

What does it mean?

<div class="result"></div>

Add above to your HTML file. :

 

[Syed1]

Bhai aap toh bahut pahuchi hui cheez nikle.

LOL koi bhi nahi. Just another pawn on the chessboard.

 

[rockyboy2018]

<div class="result"></div>

Add above to your HTML file. :

Yes, the new result is being displayed every time I refresh the webpage :

1. Toronto won, Rockyboy will be happy.
2. Vancouver won, Rockyboy will be sad.
3. Draw, no winner this time.

I have downloaded 6 images for showing scoreboard. img1 = 0, img2 = 1, img3=2 ........etc

However, the webpage is showing the same scoreboard for every match result:

it is showing 5:5 scoreboard for every match result which I do not want. I want to associate the accurate scoreboard display based on the match result.

How to do it? How to link the accurate scoreboard display with the match result?
-----------------------------------------------------------------------------------------

 

[Bhaag Viru Bhaag]

Yes, the new result is being displayed every time I refresh the webpage :

1. Toronto won, Rockyboy will be happy.
2. Vancouver won, Rockyboy will be sad.
3. Draw, no winner this time.

I have downloaded 6 images for showing scoreboard. img1 = 0, img2 = 1, img3=2 ........etc

However, the webpage is showing the same scoreboard for every match result:

it is showing 5:5 scoreboard for every match result which I do not want. I want to associate the accurate scoreboard display based on the match result.

How to do it? How to link the accurate scoreboard display with the match result?
-----------------------------------------------------------------------------------------

You don't need images. You can design the scoreboard in CSS.

I have designed it from scratch for you and made it dynamic. It took me an hour or so. Was a good practice.

I have made two versions. In the first one you can enter team names manually and second one prompts for home and away team names first and then display the scorecard.

You can check, copy the code and test on your machine. Didn't have much time otherwise I would have polished that design more.

Version 1 : https://jsfiddle.net/ksqf0ey6/2

Version 2 : https://jsfiddle.net/t9wxmr8g
[MENTION=139288]Abdul[/MENTION]

 

[Bhaag Viru Bhaag]

With a background

Version 1 : https://jsfiddle.net/ksqf0ey6/3

Version 2 : https://jsfiddle.net/t9wxmr8g/1

 

[Bhaag Viru Bhaag]

Add a property of
background-size: cover
in the body tag's CSS to view the full stadium.

 

[Bhaag Viru Bhaag]

Did you try this?

Apart from this, other features can also be added like instead of refreshing the page you have a button to simulate the match. After pressing Simulate Match button it will show the running timer and randomly add goals along with the player names who scored them just like they do in FIFA games.

 

[rockyboy2018]

I just saw your post now it is afternoon in Germany. I am going to test it and see how it goes.

Thanks

 

[rockyboy2018]

Did you try this?

Apart from this, other features can also be added like instead of refreshing the page you have a button to simulate the match. After pressing Simulate Match button it will show the running timer and randomly add goals along with the player names who scored them just like they do in FIFA games.

@Bhaag,

That's how the end result should display. Unfortunately, when I am testing the code through Atom (because I need to submit my work as a zip file and upload it on Moodle(our university uses it) so that professor can check my work) and he is using Atom to open the file and check the final code. There is a strict guideline to follow which software to use and so on , so this way he does not have to use other tools to check the work.

When I am copying the full path in html file and run it on browser , the score card and match result is being displayed in simple BLACK TEXT unlike on the above posted link where the match result is being displayed in color and scoreboard is visible. Other than that, every functionality is working as per the instructions of the assignment so coding is accurate.

Just need to need find a way to display a scoreboard as it is being shown on the above link.(like in color ) for this reason I think professor recommends to download images in the computer then link it through Atom (you can work on three different files separately html, css and js. Then you link index.js through script tag in html file and you copy teh full path of html file and run it on browser).

 

[rockyboy2018]

@Bhaag,

I have one more query. Let's say I would like to display each match result in a differnt color for example, when rockeyboay2018 wins and is happy, the text should be shown in orange color. Loses, is sad , should be shown in blue color and no match result, is confused, should be shown in red color.

 

[Bhaag Viru Bhaag]

@Bhaag,

That's how the end result should display. Unfortunately, when I am testing the code through Atom (because I need to submit my work as a zip file and upload it on Moodle(our university uses it) so that professor can check my work) and he is using Atom to open the file and check the final code. There is a strict guideline to follow which software to use and so on , so this way he does not have to use other tools to check the work.

When I am copying the full path in html file and run it on browser , the score card and match result is being displayed in simple BLACK TEXT unlike on the above posted link where the match result is being displayed in color and scoreboard is visible. Other than that, every functionality is working as per the instructions of the assignment so coding is accurate.

Just need to need find a way to display a scoreboard as it is being shown on the above link.(like in color ) for this reason I think professor recommends to download images in the computer then link it through Atom (you can work on three different files separately html, css and js. Then you link index.js through script tag in html file and you copy teh full path of html file and run it on browser).

It's east to fix. I actually built and tested it on Atom first and then uploaded on jsfiddle so that you can copy and paste the code. You are just missing a little step may be. Did you include the CSS file in your HTML file? And there is only one image and that too is taken from the web. You do not need to download it.

Follow these steps:

1.) Create and empty project folder and open it in Atom.
2.) Create three files index.html, script.js and style.js
3.) Copy the HTML code from one of the jsfiddle link amd paste it in between the 'body' tag.
4.) Copy the CSS code and exactly paste it in the style.css file.
5.) Copy the JS code and paste it in the script.js file.
6.) Now come back to HTML file just before the ending head tag include your CSS file using the link tag

<link rel="stylesheet" href="style.css">

7.) Now in the same index.html file just before the ending body tag and below your HTML code include your script using the script tag

<script src="script.js"></script>

I am not sure if this post will show the script and link code because most of the websites escape it and I am posting it through my mobile.

That's how you will set your three files. Now in order to run it in browser. You will need a package named live server installed on your Atom editor. I am not sure if it's pre installed but you can refer this link.

https://atom.io/packages/atom-live-server

How to install live server?

1) Open atom.
2) Under Edit choose Preferences
3) Choose Install
4) Type atom-live-server and install it. That's it.

How to run live server?

After pasting all the above code in their respective files. Hold down Ctrl + Alt + L to run live server. It will load it exactly as it is loading in jsfiddle links.

 

[Bhaag Viru Bhaag]

@Bhaag,

I have one more query. Let's say I would like to display each match result in a differnt color for example, when rockeyboay2018 wins and is happy, the text should be shown in orange color. Loses, is sad , should be shown in blue color and no match result, is confused, should be shown in red color.

Yeah different colors can be added easily. Logic is there you just have to add three classes in CSS. To make it even more fun, we can actually add three emoticons along with the result at the end. I will add that code on the above links and update it.

 

[Bhaag Viru Bhaag]

Don't copy the full path of HTML and run like that. Just use live server in Atom. This is a pretty simple code. If you still want to download an image into your project then create a folder named 'images' and download that same image of Manchester United stadium or any image and rename it to 'stadium-bg'.

In the CSS file, in the body tag's background property edit the url part only to url('../images/stadium-bg.jpg')

Make sure to check image's extension if it's jpeg/webp/png.

 

[rockyboy2018]

It's east to fix. I actually built and tested it on Atom first and then uploaded on jsfiddle so that you can copy and paste the code. You are just missing a little step may be. Did you include the CSS file in your HTML file? And there is only one image and that too is taken from the web. You do not need to download it.

Follow these steps:

1.) Create and empty project folder and open it in Atom.
2.) Create three files index.html, script.js and style.js
3.) Copy the HTML code from one of the jsfiddle link amd paste it in between the 'body' tag.
4.) Copy the CSS code and exactly paste it in the style.css file.
5.) Copy the JS code and paste it in the script.js file.
6.) Now come back to HTML file just before the ending head tag include your CSS file using the link tag

<link rel="stylesheet" href="style.css">

7.) Now in the same index.html file just before the ending body tag and below your HTML code include your script using the script tag

<script src="script.js"></script>

I am not sure if this post will show the script and link code because most of the websites escape it and I am posting it through my mobile.

That's how you will set your three files. Now in order to run it in browser. You will need a package named live server installed on your Atom editor. I am not sure if it's pre installed but you can refer this link.

https://atom.io/packages/atom-live-server

How to install live server?

1) Open atom.
2) Under Edit choose Preferences
3) Choose Install
4) Type atom-live-server and install it. That's it.

How to run live server?

After pasting all the above code in their respective files. Hold down Ctrl + Alt + L to run live server. It will load it exactly as it is loading in jsfiddle links.

Yes, I did not include CSS file in my HTML file. Let me try to fix it. I will also be downloading live server package in Atom I know it is easy to install. Let me follow your instructions and get back to you.

 

[rockyboy2018]

@Bhaag

Showing the match result in color just like on above link. It works.

Just did not link css file in html file.

Yup, did not need to download images separately for scoreboard.

For color what we need to do?

 

[rockyboy2018]

Yeah different colors can be added easily. Logic is there you just have to add three classes in CSS. To make it even more fun, we can actually add three emoticons along with the result at the end. I will add that code on the above links and update it.

Do that. Coding is very fun if you understand the logic. Even though I had no programming language at all, it is so much easier to understand the human mind through values.

 

[rockyboy2018]

Yup. Even I did not download it the stadium image is showing in the background. I think you have very advanced knowledge of coding. Let me try this way as well so I know how it goes. I should know both ways.

 

[Bhaag Viru Bhaag]

Do that. Coding is very fun if you understand the logic. Even though I had no programming language at all, it is so much easier to understand the human mind through values.

Yeah I will do that later tonight and update the links here. Is it working fine now? Did you try both the versions? Second one asks for the team names first and then show the scorecard.

 

[Bhaag Viru Bhaag]

Do that. Coding is very fun if you understand the logic. Even though I had no programming language at all, it is so much easier to understand the human mind through values.

Updated the code with colors and other stuff.

Version 1: https://jsfiddle.net/2oq5hsxv/
Version 2: https://jsfiddle.net/60cru592/

Update all the code(HTML, CSS, JS) in your project with any of the above two versions.

 

[rockyboy2018]

Let me do that. Thanks for your hard work. Much appreciated it.

 

[Bhaag Viru Bhaag]

Did you try it?