DEV Community: Analyze_

How to preload images in HTML and CSS

Analyze_ — Tue, 12 Dec 2023 14:53:14 +0000

I figured out a way to preload images in html and css. I have used this for stuff like buttons that have multiple different images (for when it is clicked vs not being clicked). A lot of the time, you will click on the button then it will take a second to load the background.

How to do it:

In your html, create a

with the class of hidden.
Put img tags with the srcs of all of the images you want to load within that .

For example:

<div class="hidden">
  <img src="images/open_button_click.jpg" alt="">
</div>

The CSS:

Paste this into your CSS:

.hidden {
  position:fixed;
  bottom:0px;
  left:0px;
  pointer-events: none;
  opacity:0%;
}

What this does is hide the elements visually then makes it so they don't affect anything else on your page.

That's all I wanted to keep this simple.

How to make an infinite scrolling image loop in css & javascript!

Analyze_ — Thu, 14 Sep 2023 01:06:46 +0000

In this tutorial, I am going to teach you how to create an infinite horizontal scrolling image in css & javascript!

Step #1: HTML
You are going to need to create a <div> with the ID and class of "landscape," although you can name it whatever you would like.

Code:

<div class="landscape" id="landscape"></div>

Step #2: Finding the right image
You are going to need to find an image that loops when it is next to itself horizontally. This might be hard to find. If you can't find one you like, you can always just make your own in something such as Photoshop.

For mine I used a cartoon cloud image (See Here).

Step #3: CSS
For this you are going to fix the div to the page and make sure it fills the whole page. You also need to do things, like set the z-index to -1 so that it is positioned behind any other elements.

Code:

.landscape{
  position:fixed;
  top:0px;
  left:0px;
  background:url('..path/to/image.png');
  width:100vw;
  height:100vh;
  background-size:1200px 650px;
  background-position:0px;
  z-index:-1;
}

Step #4: JavaScript
Last but not least, to make the movement of the background, you will need to use JavaScript. Essentially all it is, is a repeating loop that changes the background-image's background-position by one using a variable. This variable increases by one integer each time the function is called, creating the movement effect.

Code:

var x = 1;
var bgImage = document.getElementById('landscape');

function move(){
  x++;
  bgImage.style.backgroundPositionX = x + "px";
}

setInterval(move, 50);

If you want, you can change the interval time to change the speed of the background image.

Thanks for reading, I hope it helped!

Quinn

How to make a GPA Calculator as a beginner in HTML & JavaScript

Analyze_ — Thu, 01 Jun 2023 11:02:00 +0000

In this tutorial I will show you how to create an easy GPA calculator in HTML and JavaScript.

Part One [HTML]:

In the <body> of your HTML file, add in an <input>, with the id of "input", and the type of text. On the next line, create a <span> with the class and id of "output". Next add a <button> with an onmousedown event. Type calculate() into the onmousedown event. Make the button say "Calculate". This button will run the JavaScript that gets what the output will be.

Cheat Sheet:

  <input type="text" id="input">
  <span class="output" id="output"></span>
  <button onmousedown="calculate()">Calculate</button>

Part 2 [JavaScript]:

First, create a variable called sum. Do not set the value for this variable (it should look like this: var sum;). Next, create a variable called numberOfGrades, and set the value to 1. The variable numberOfGrades, will be used to detect how many letter grades the user input. For example, if the user inputs A+, B, B+, then eventually we will make it so that the variable numberOfGrades will detect that the user input 3 letter grades.

After that, create a function called calculate(). It should look something like this: function calculate(e){}. In the curly brackets of this function, set the variable numberOfGrades to 1. Then, set the variable sum to the value of our input box in HTML (This should look like this: sum = document.getElementById('input').value;). This means that the sum will look like the users input before anything is calculated. After you did all of that, add this code on the next line:

if(sum.includes('A+')){
    sum = sum.replaceAll('A+', '4.0')
  }
  if(sum.includes('A')){
    sum = sum.replaceAll('A', '4.0');
  }
  if(sum.includes('A-')){
    sum = sum.replaceAll('A-', '3.7');
  }
  if(sum.includes('B+')){
    sum = sum.replaceAll('B+', '3.3');
  }
  if(sum.includes('B')){
    sum = sum.replaceAll('B', '3.0');
  }
  if(sum.includes('B-')){
    sum = sum.replaceAll('B-', '2.7');
  }
  if(sum.includes('C+')){
    sum = sum.replaceAll('C+', '2.3');
  }
  if(sum.includes('C')){
    sum = sum.replaceAll('C', '2.0');
  }
  if(sum.includes('C-')){
    sum = sum.replaceAll('C-', '1.7');
  }
  if(sum.includes('D+')){
    sum = sum.replaceAll('D+', '1.3');
  }
  if(sum.includes('D')){
    sum = sum.replaceAll('D', '1.0');
  }
  if(sum.includes('D-')){
    sum = sum.replaceAll('D-', '0.7');
  }
  if  (sum.includes('F')){
    sum = sum.replaceAll('F', '0.0');
  }

What this code does is it replaces all of the letter grades in the sum variable with a grade point value. On the next line, you have to add the code:

while(sum.includes(',')){
    sum = sum.replace(',', '+');
    numberOfGrades++;
  }

This code is to replace all of the commas in the users input with plus signs. The sum variable's value will now look something like this: 4.0 + 3.0 + 3.7. But as we know, 10.7 is not a GPA. That is why we have the variable numberOfGrades. In the while loop above, I made it so that numberOfGrades's value increased by one every time it detected a comma.

Now what we do is average the GPA out. This math is really simple. All you have to do is set the output element's innerHTML to (eval(sum) / numberOfGrades). The math equation above, divides the grades added together with the amount of grades originally. This gives you the Grade Point Average.

Cheat Sheet:

var sum;
var numberOfGrades = 1;
function calculate(e){
  numberOfGrades = 1;
  sum = document.getElementById('input').value;
  if(sum.includes('A+')){
    sum = sum.replaceAll('A+', '4.0')
  }
  if(sum.includes('A')){
    sum = sum.replaceAll('A', '4.0');
  }
  if(sum.includes('A-')){
    sum = sum.replaceAll('A-', '3.7');
  }
  if(sum.includes('B+')){
    sum = sum.replaceAll('B+', '3.3');
  }
  if(sum.includes('B')){
    sum = sum.replaceAll('B', '3.0');
  }
  if(sum.includes('B-')){
    sum = sum.replaceAll('B-', '2.7');
  }
  if(sum.includes('C+')){
    sum = sum.replaceAll('C+', '2.3');
  }
  if(sum.includes('C')){
    sum = sum.replaceAll('C', '2.0');
  }
  if(sum.includes('C-')){
    sum = sum.replaceAll('C-', '1.7');
  }
  if(sum.includes('D+')){
    sum = sum.replaceAll('D+', '1.3');
  }
  if(sum.includes('D')){
    sum = sum.replaceAll('D', '1.0');
  }
  if(sum.includes('D-')){
    sum = sum.replaceAll('D-', '0.7');
  }
  if  (sum.includes('F')){
    sum = sum.replaceAll('F', '0.0');
  }
  while(sum.includes(',')){
    sum = sum.replace(',', '+');
    numberOfGrades++;
  }
  document.getElementById("output").innerHTML = (eval(sum) / numberOfGrades);
}

Thanks for reading!
-Quinn

View Project
Code

How to make your own simple translator in HTML & JavaScript

Analyze_ — Wed, 31 May 2023 15:23:59 +0000

DESCRIPTION:

In this tutorial, I will teach you how to make a website that translates one language into another using HTML, CSS, and JavaScript.

Part One [Choosing a Language]:

When choosing a language, think of something that you are interested in learning, already know, or have some sort of connection to. In this tutorial, I am going to be using Swedish. I chose this language because I have been learning it for a pretty decent amount of time now.

Part Two [Setting Up Your Files]:

In your index.html, add the line <link href="style.css" rel="stylesheet" type="text/css" /> to your <head> in order to link your css file. Next, add <script src="script.js"></script>, & <script src="translations.js"></script> to link your JavaScript to your HTML file.

Part Three [Writing Your HTML]:

Create a <div> with the class of container. This will contain your input and output boxes. Next, inside of your <div>, create a <textarea> with the id and class of input. Set the placeholder to something like input or whatever language you will have translated into the other language (for example: English, because I am translating English to Swedish).

On the next line, create a <div> with the id and class of output. This is going to be the translated text later on. Inside of this <div>, you can create something for a place holder if you want. My placeholder is <span style="color:lightslategray;">Swedish</span>.

Cheat Sheet:
_index.html_

<!DOCTYPE html>
<html>

<head>
  <link rel="icon" href="/fav.png" type="image/x-icon">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>English to Swedish</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div class="container">
    <textarea name="" id="input" cols="30" rows="10" class="input" placeholder="English"></textarea>
    <div id="output" class="output">
      <span style="color:lightslategray;">Swedish</span>
    </div>
  </div>
  <script src="script.js"></script>
  <script src="translations.js"></script>
</body>

</html>

Part Four [script.js]:

First, create a variable called translated. Leave the value blank. It should look like this: var translated;. Type out this next: document.getElementById('input').onkeyup = function(e){ }. What this does is detect when you type anything into the input area. Inside of the curly brackets ({} <-- these things), type: translated = " " + document.getElementById('input').value;. This code sets the variable translated to our input value. Also inside of the curly brackets, type in translate(e). After this, type: document.getElementById('output').innerHTML = translated; on the next line, in order to set the output <div> to the translated text.

Cheat Sheet:
_script.js_

var translated;
document.getElementById('input').onkeyup = function(e){
  translated = " " + document.getElementById('input').value;
  translate(e);
  document.getElementById('output').innerHTML = translated;
}

Part Five [translations.js]:

We are now in translations.js, and are going to start and make the translations. First, create a function called translate(e). It should look like this: function translate(e){}. In the curly brackets type out:

while(translated.includes(" hello")){
  translated = translated.replace(" hello", " hey");
}

This translated "hello" to Swedish! Copy and paste these 3 lines for each word that you translate. You also need to make a capitalized version of each word. This is what it would look like:

while(translated.includes("Hello ")){
  translated = translated.replace("Hello ", "Hey ");
}

Part Six [CSS]:

This is the format that I made, but you can change it however you want.

/*font stuff:*/
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
* {
    font-family: 'IBM Plex Sans', sans-serif;
    text-align: center;
    box-sizing: border-box;
}
html{
  overflow-y:scroll;
  overflow-x:none;
  box-shadow: 0 4px 8px 0 #00000007, 0 6px 15px 0 #0000001a;
  margin-top:7.3%;
  height:70vh;
  background:#f2f2f2;
  width:25%;
  margin-left:37.5%;
  align-content:center;
  text-align:center;
  border-radius:12px;
}
h1{
  margin:30px;
  padding-top:30px;
}
.secondary-text{
  color: #9f2dde;
}
input{
  border-radius:3px;
  border:none;
  padding:3px;
  margin-bottom:5px;
}
button{
  border-radius:3px;
  border:none;
  padding:3px;
  background:#dedede;
  width:182.5px;
  cursor:pointer;
}
hr{
  width:80%;
}
input[type=number]{
  width:19%;
}
.fileUploadDiv{
  margin-bottom:3px;
  margin-left:62.5px;
  text-align:center;
  border:none;
  width:59.3%;
  background:white;
  border-radius:3px;
  font-size:15px;
}
input[type=file]{
  display: none;
}
label{
  cursor:pointer;
}
select{
  border-radius:3px;
  border:none;
  padding:3px;
  background:white;
  width:182.5px;
  margin-bottom:3px;
  cursor:pointer;
}
input[type=checkbox]{
  cursor:pointer;
  appearance: none;
  background-color: #fff;
  margin: 0;
  font: inherit;
  color: currentColor;
  width: 1.15em;
  height: 1.15em;
  border: 0.1em solid currentColor;
  border-radius: 0.15em;
  transform: translateY(-0.075em);
}
input[type="checkbox"]::before {
  content: "";
  width: 0.65em;
  height: 0.65em;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em black;
}

input[type="checkbox"]:checked {
  background: #9f2dde;
  background-size: 5px 5px;
}
code{
  user-select:all;
}
textarea{
  resize:none;
  border:none;
  transform:translateY(10px);
  border-radius:12px;
}
.output{
  font-size:small;
  transform:translateY(10px);
}

Thanks For Reading!

-Quinn

Code
View Project

I made a dark mode CSS download

Analyze_ — Fri, 07 Oct 2022 13:48:56 +0000

Hey I just made a dark mode CSS download. Here are the steps to run it:

1: Download
2: Upload it to the files to your website
3: Add this to the <head> of your html file:

<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet'>
  <link href='https://fonts.googleapis.com/css?family=Fira Code' rel='stylesheet'>

to add the fonts
3: Last, add

<link href="style.css" rel="stylesheet" type="text/css" />

to connect the style.css file to your html file!

That's it!

Cpp Square Root Calculator

Analyze_ — Mon, 06 Jun 2022 14:52:20 +0000

I like making calculators so I made one for square root. This uses the cmath package

Link

#include <cmath>
#include <iostream>
using namespace std;

int main() {
  string session = "y";

  while (session == "y") {
    int num = 0;
    cout << "What would you like to find the quare root of?\n";
    cin >> num;
    cout << sqrt(num) << "\nWould you like to continue session [y/n]?\n";
    cin >> session;
    cout << "\x1B[2J\x1B[H";
  } // end of session
  cout << "\x1B[2J\x1B[H";
  cout << "Ended session\n";
  return 1;
} // end of code

cpp Binary to Decimal decoder

Analyze_ — Fri, 03 Jun 2022 10:49:32 +0000

Since my (last post) I had been trying to make a Binary to Decimal calculator, also using C++. I went for a different method this time, and now the binary supports over 8 digits.

Credit to: https://geeksforgeeks.org/

Link to finished project

Code:

#include <iostream>
using namespace std;

int main() {
  char binaryNumber[] = "0101010101010101010101010101010101";
  string session = "y";
  while (session == "y") {

    cout << "\nEnter a Binary number (1s and 0s): ";
    cin >> binaryNumber;
    cout << "\n";

    cout << stoi(binaryNumber, 0, 2);
    session = "y";
    cout << "\nContinue session? [y/n]\n";
    cin >> session;
    cout << "\x1B[2J\x1B[H";
  } // end of session
  cout << "Credit to https://geeksforgeeks.org/ for helping me with some of "
          "this code!\n";
  return 1;
}

`
Changelog#1(Fri, Jun 3rd):
Fixed formatting

Cpp Decimal to Binary Converter

Analyze_ — Wed, 01 Jun 2022 13:38:33 +0000

Link

I would like to know how to add more digits, can anyone help?

#include <iostream>

int main() {
  int num = 0;
  int digit1 = 0;//128
  int digit2 = 0;//64
  int digit3 = 0;//32
  int digit4 = 0;//16
  int digit5 = 0;//8
  int digit6 = 0;//4
  int digit7 = 0;//2
  int digit8 = 0;//1
  std::string session = "y";
  while (session == "y"){

digit1 = 0;
digit2 = 0;
digit3 = 0;
digit4 = 0;
digit5 = 0;
digit6 = 0;
digit7 = 0;
digit8 = 0;
std::string cont = "";


  std::cout << "\nEnter an integer 255 or under (this binary only supports 8 digits): "; std::cin >> num; std::cout << "\n"; 
    if (num < 256) {
 if(num>127){ digit1++; num = num - 128;}
 if(num>63){ digit2++; num = num - 64;}
 if(num>31){ digit3++; num = num - 32;}
 if(num>15){ digit4++; num = num - 16;}
 if(num>7){ digit5++; num = num - 8;}
 if(num>3){ digit6++; num = num - 4;}
 if(num>1){ digit7++; num = num - 2;}
 if(num>0){ digit8++; num = num - 1;}
 std::cout << digit1 << digit2 << digit3 << digit4 << digit5 << digit6 << digit7 << digit8;
session = "y";
  std::cout << "\nContinue session? [y/n]\n";
    std::cin >> session;
      }
    else if (num > 255){
      std::cout << "You have to enter a number under 256\n[ENTER ANY KEY TO RESET]\n";
      std::cin >> cont;
      session = "y";
    }
    else{
      std::cout << "You have to enter a number above -1\n[ENTER ANY KEY TO RESET]\n";
      std::cin >> cont;
      session = "y";
    }
    std::cout << "\x1B[2J\x1B[H";//reset screen
    }//end of session
  return 1;
}

Changelog#1(Wed, June 1st, 2022): Added a feature so if you enter a number over 255, or under 0, it gives a message and resets Changlelog#2(Thur, June 2nd, 2022): Implemented console erase after calculated