Web  Dev

Web Dev

1653278579

HTML, CSS & Javascript Project | Build a Number Trivia App

Number Trivia App | Javascript Project | HTML, CSS & Javascript

Create a number trivia app that displays a fact for the number the user inputs. It also consists a 'Get Random Fact' button that displays fact for random numbers.

In today’s tutorial, we will build a Number Trivia App. To create this project, we need HTML, CSS and javascript.
For this project, we will be using the Numbers API.

The project consists of a search bar. The user enters a desired number into the input field and hits the ‘Get Fact’ button. Once the user clicks the button, a fact related to the number is displayed.

Alternatively, the user can click on the ‘Get Random Fact’ button. Once the user clicks on this button, a random number is selected. Following this, we display a fact corresponding to that number.

We also validate the user input. If the user enters a number less than 0 or greater than 300, we display an error message. Also, if the user leaves the input field empty, we show the error message.

Project Folder Structure:

Before we start coding, let us take a look at the project folder structure. The project folder is called – Number Trivia App. Inside this folder, we have three files – index.html, style.css and script.js.

HTML:

We begin with the HTML code. First, copy the code below and paste it into your HTML document.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Number Trivia App</title>
    <!-- Google Fonts -->
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap"
      rel="stylesheet"
    />
    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <div class="search-container">
        <input type="num" placeholder="Number" id="num" />
        <button id="get-fact-btn">Get Fact</button>
      </div>
      <button id="ran-fact-btn">Get Random Fact</button>
      <div class="fact"></div>
    </div>
    <!-- Script -->
    <script src="script.js"></script>
  </body>
</html>

CSS:

Next, we add styling to our elements using CSS. Now copy the code provided to you below and paste it into your stylesheet.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  background-color: #566fff;
}
.container {
  background-color: #ffffff;
  width: 95vw;
  font-size: 16px;
  max-width: 31.25em;
  padding: 3.5em 2.5em;
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  border-radius: 0.6em;
  box-shadow: 0 1.2em 3em rgba(0, 4, 52, 0.2);
}
.search-container {
  display: flex;
  justify-content: space-between;
}
.container input,
.container button {
  font-size: 1.25em;
  outline: none;
  border: none;
  border-radius: 0.4em;
}
.container input {
  width: 40%;
  border: 1px solid #bdbdbf;
  padding: 0.6em;
}
.container button {
  width: 55%;
  background-color: #566fff;
  color: #ffffff;
  font-weight: 500;
  padding: 0.7em;
  cursor: pointer;
}
#ran-fact-btn {
  width: 100%;
  margin-top: 1em;
}
.fact {
  background-color: #ffffff;
  box-shadow: 0 0 1.2em rgba(0, 4, 52, 0.1);
  margin: 3em auto 0 auto;
  padding: 2.8em 1.8em;
  border-radius: 0.6em;
  border: none;
  border-bottom: 0.6em solid #566fff;
  display: none;
}
.fact h2 {
  font-size: 2.8em;
  color: #181a34;
}
.fact p {
  font-size: 1.15em;
  font-weight: 400;
  color: #50526b;
  line-height: 1.8em;
  text-align: justify;
  margin-top: 0.8em;
}
p.msg {
  text-align: center;
  font-weight: 500;
  color: #181a34;
}

Javascript:

Finally, we add functionality to this project using Javascript. Once again, copy the code below and paste it into your script file.

let getFactBtn = document.getElementById("get-fact-btn");
let ranFactBtn = document.getElementById("ran-fact-btn");
let fact = document.querySelector(".fact");
let url = "http://numbersapi.com/";

let fetchFact = (num) => {
  let finalUrl = url + num;
  fetch(finalUrl)
    .then((resp) => resp.text())
    .then((data) => {
      fact.style.display = "block";
      fact.innerHTML = `<h2>${num}</h2>
      <p>${data}</p>`;
      document.querySelector(".container").append(fact);
    });
};
let getFact = () => {
  let num = document.getElementById("num").value;
  //Check if input number is not empty
  //If not empty
  if (num) {
    //Check if number lies between 0 and 300
    //if Yes fetch the fact
    if (num >= 0 && num <= 300) {
      fetchFact(num);
    }
    //If number is less than 0 or greater than 300 display error message.
    else {
      fact.style.display = "block";
      fact.innerHTML = `<p class="msg"> Please enter a number between 0 to 300.</p>`;
    }
  }
  //If input number is empty display error message
  else {
    fact.style.display = "block";
    fact.innerHTML = `<p class="msg">The input field cannot be empty</p>`;
  }
};

let getRandomFact = () => {
  //Random number between 0 to 300
  let num = Math.floor(Math.random() * 301);
  fetchFact(num);
};

getFactBtn.addEventListener("click", getFact);
ranFactBtn.addEventListener("click", getRandomFact);
window.addEventListener("load", getRandomFact);

If you face any issues while creating this code, you can download the source code by clicking on the ‘Download Code’ button below. Also, feel free to drop your suggestions and feedback in the comments below.

API Used:
http://numbersapi.com/ 

📁 Download Source Code : 
https://www.codingartistweb.com

#html #javascript #css 

What is GEEK

Buddha Community

HTML, CSS & Javascript Project | Build a Number Trivia App
Tech2 etc

Tech2 etc

1646825446

HTML CSS JavaScript Project | Build Recipe App With HTML CSS JavaScript | Project For Beginners

HTML CSS JavaScript Project | Build Recipe App With HTML CSS JavaScript | Project For Beginners

One of the most popular scripting languages, JavaScript is used in all the web applications for validation, rendering dynamic content, interactive graphics and maps, and much more. Along with HTML and CSS, JS has the power to build complete, robust web applications. Because of JS, the user can interact with a web page and see all the interesting elements on the page. As we explore the projects, we will come to know-how js helps in building interactive web pages. Before that, let us quickly go through the important features of JS:

Used on both client-side and server-side to create interactive web content.

Greatly improves user experience by providing dynamic functionality.

Light-weight language having object-oriented capabilities.

Interpreted, open and cross-platform language.

Seamless integration with Java and HTML.


Why JavaScript Projects?
JS is the heart of any web application. Good knowledge of JavaScript can get you a range of challenging and interesting career options like developing mobile and desktop apps, building dynamic websites from scratch, UI/UX designer, or even a full stack developer. If you know the basics of JavaScript, projects are your next step to add stars to your resume. If you don’t have any prior programming experience, you can take up basic JavaScript courses and then come back to these projects. If you follow a bit of HTML & CSS, you will understand most of the Javascript projects with the source code mentioned below.

For more JavaScript projects visit: https://www.youtube.com/tech2etc

#javascript #project #html #css #web-development 

Shawn  Durgan

Shawn Durgan

1595547778

10 Writing steps to create a good project brief - Mobile app development

Developing a mobile application can often be more challenging than it seems at first glance. Whether you’re a developer, UI designer, project lead or CEO of a mobile-based startup, writing good project briefs prior to development is pivotal. According to Tech Jury, 87% of smartphone users spend time exclusively on mobile apps, with 18-24-year-olds spending 66% of total digital time on mobile apps. Of that, 89% of the time is spent on just 18 apps depending on individual users’ preferences, making proper app planning crucial for success.

Today’s audiences know what they want and don’t want in their mobile apps, encouraging teams to carefully write their project plans before they approach development. But how do you properly write a mobile app development brief without sacrificing your vision and staying within the initial budget? Why should you do so in the first place? Let’s discuss that and more in greater detail.

Why a Good Mobile App Project Brief Matters?

Why-a-Good-Mobile-App-Project-Brief-Matters

It’s worth discussing the significance of mobile app project briefs before we tackle the writing process itself. In practice, a project brief is used as a reference tool for developers to remain focused on the client’s deliverables. Approaching the development process without written and approved documentation can lead to drastic, last-minute changes, misunderstanding, as well as a loss of resources and brand reputation.

For example, developing a mobile app that filters restaurants based on food type, such as Happy Cow, means that developers should stay focused on it. Knowing that such and such features, UI elements, and API are necessary will help team members collaborate better in order to meet certain expectations. Whether you develop an app under your brand’s banner or outsource coding and design services to would-be clients, briefs can provide you with several benefits:

  • Clarity on what your mobile app project “is” and “isn’t” early in development
  • Point of reference for developers, project leads, and clients throughout the cycle
  • Smart allocation of available time and resources based on objective development criteria
  • Streamlined project data storage for further app updates and iterations

Writing Steps to Create a Good Mobile App Project Brief

Writing-Steps-to-Create-a-Good-Mobile-App-Project-Brief

1. Establish the “You” Behind the App

Depending on how “open” your project is to the public, you will want to write a detailed section about who the developers are. Elements such as company name, address, project lead, project title, as well as contact information, should be included in this introductory segment. Regardless of whether you build an in-house app or outsource developers to a client, this section is used for easy document storage and access.

#android app #ios app #minimum viable product (mvp) #mobile app development #web development #how do you write a project design #how to write a brief #how to write a project summary #how to write project summary #program brief example #project brief #project brief example #project brief template #project proposal brief #simple project brief template

Lyda  White

Lyda White

1628189100

How to Image Uploader with Preview || Html CSS JavaScript

Image Uploader with Preview || Html CSS JavaScript || #html #css #javascript #coding

#html #css #javascript 

code savvy

code savvy

1630506330

Product landing page using HTML CSS & JavaScript | web design

Knowledge

This video is about the product landing page using HTML CSS And JavaScript, in which we created a simple product landing page using HTML CSS and in order to perform  those powerful animations we use the GSAP a JavaScript animation library for work done.

In this video we broadly cover the concepts of CSS Flex box and CSS Grid system and Some CSS Properties such as nth child selector, ::before & ::after much more.

Don't forget to join the channel for more videos like this. Code Savvy

📁 Assets 
Icons : https://fontawesome.com/
Fonts : https://fonts.google.com/
GitHub : https://github.com/ananikets18
GSAP : https://greensock.com/gsap/

Outline ⏱

0:00 - Intro
0:10 - Result
0:38 - Project Setup
01:35 – Reset HTML
02:21 – Left Container HTML
03:41 – Wrapper
14:58 – Bottom Shoe Nav
26:23 – Right Container HTML
33:10 – Product Size
35:49 – Reviews
41:11 – GSAP Animations

Click to Watch Full tutorial on YOUTUBE

#html  #css  #javascript  #web-development #html5 

#html #css #tailwindcss #javascript 

Fredy  Larson

Fredy Larson

1595059664

How long does it take to develop/build an app?

With more of us using smartphones, the popularity of mobile applications has exploded. In the digital era, the number of people looking for products and services online is growing rapidly. Smartphone owners look for mobile applications that give them quick access to companies’ products and services. As a result, mobile apps provide customers with a lot of benefits in just one device.

Likewise, companies use mobile apps to increase customer loyalty and improve their services. Mobile Developers are in high demand as companies use apps not only to create brand awareness but also to gather information. For that reason, mobile apps are used as tools to collect valuable data from customers to help companies improve their offer.

There are many types of mobile applications, each with its own advantages. For example, native apps perform better, while web apps don’t need to be customized for the platform or operating system (OS). Likewise, hybrid apps provide users with comfortable user experience. However, you may be wondering how long it takes to develop an app.

To give you an idea of how long the app development process takes, here’s a short guide.

App Idea & Research

app-idea-research

_Average time spent: two to five weeks _

This is the initial stage and a crucial step in setting the project in the right direction. In this stage, you brainstorm ideas and select the best one. Apart from that, you’ll need to do some research to see if your idea is viable. Remember that coming up with an idea is easy; the hard part is to make it a reality.

All your ideas may seem viable, but you still have to run some tests to keep it as real as possible. For that reason, when Web Developers are building a web app, they analyze the available ideas to see which one is the best match for the targeted audience.

Targeting the right audience is crucial when you are developing an app. It saves time when shaping the app in the right direction as you have a clear set of objectives. Likewise, analyzing how the app affects the market is essential. During the research process, App Developers must gather information about potential competitors and threats. This helps the app owners develop strategies to tackle difficulties that come up after the launch.

The research process can take several weeks, but it determines how successful your app can be. For that reason, you must take your time to know all the weaknesses and strengths of the competitors, possible app strategies, and targeted audience.

The outcomes of this stage are app prototypes and the minimum feasible product.

#android app #frontend #ios app #minimum viable product (mvp) #mobile app development #web development #android app development #app development #app development for ios and android #app development process #ios and android app development #ios app development #stages in app development