DEV Community: davidka7

Hover over text and see a difference

davidka7 — Sun, 17 Jan 2021 02:37:11 +0000

Sometimes you want your button or element or div to change after someone hovers over it with a mouse or anything else. Here is one example of the right of the syntax you can wright in css

By adding the :hover on CSS id, class, or any other identity after the person hovers on it would change based on the new standards given to it.
.id_1:hover {
background-color: blue;
}

The syntax for form in react

davidka7 — Fri, 08 Jan 2021 20:15:49 +0000

Call a function inside a function

davidka7 — Sun, 03 Jan 2021 04:52:34 +0000

Sometimes you’ll need another global function or one local function to rerun to perform some deeper algorithms and save some lines of code so I’ll show an example of one.

Function run(number){
Let newNumber = 0
Function again(){

}
For (let i=0; i<number; I++)
{

newNumber = again(newNumber)

}
Return newNumber
}

How to write a simple javascript algorithm, for javascript beginners.

davidka7 — Sun, 27 Dec 2020 01:14:02 +0000

Write A function, then call it underneath with the write arguments(the string/boolean/number/float/etc inside the function parenthesis). Then right punctuality inside a function and return the new data.

function addition(number) {
number = number + number
return number
// answer returned is 10
}

addition(5)

Let your window speak your text

davidka7 — Sat, 19 Dec 2020 20:41:46 +0000

Here are the basics you will need for text to speech.
It should work on all browsers but if not you can put if or else statement checking if 'speechSynthesis' in window exists or is supported.
var msg = new SpeechSynthesisUtterance();
msg.text = "Hello, my name is Peter";
window.speechSynthesis.speak(msg);

Call the function inside that function

davidka7 — Sun, 13 Dec 2020 03:33:33 +0000

Sometimes instead of just a loop, you might need a more descriptive tactic. A cool trick is if you need the same functionality to be repeated again you can just call the function again inside the function. Just make sure to break otherwise it might go into an infinite loop.

function hitAgain(number, boolean) {
number +=1
if (boolean == false)
{
}
number += hitAgain(number, false)

return number

}

hitAgain(1, true)

Hover CSS?!

davidka7 — Sun, 06 Dec 2020 04:49:12 +0000

Sometimes you would hover over a text or picture, or any element on the screen and it would have some kind of reaction. Whether the reaction is a difference in background, it glowing, or popping out, this all can be done with some simple CSS tricks.

Let's start by calling our element a p div

Here

Lets say when you hover over you want its background to change from transparent to blue. All you would have to write in your CSS is add the: hover attribute for example like this.

p:hover {
background-color: blue;
}

Awesome box stairs outline

davidka7 — Sun, 29 Nov 2020 04:36:55 +0000

Always wanted to create a cool design on your card or box with css, here one a multiple color outline of a box.

box {

line-height: 30px;


box-shadow:
  inset #0cab9c 0 0 0 5px, 
  inset #059c8e 0 0 0 1px, 
  inset #0cab9c 0 0 0 10px, 
  inset #1fbdae 0 0 0 11px, 
  inset #8ce9ff 0 0 0 16px, 
  inset #48e4d6 0 0 0 17px, 
  inset #bfecf7 0 0 0 21px, 
  inset #48e4d6 0 0 0 22px

}

Use sound with hooks

davidka7 — Sun, 29 Nov 2020 04:28:17 +0000

First
npm install use-sound
import useSound from 'use-sound';
import someSound from '../someSound.mp3';
const playButton = () => {
const [play] = useSound(someSound);
return Play Now;
};

The CSS Grid Functionality

davidka7 — Sun, 15 Nov 2020 02:08:15 +0000

Have You Ever Made A grid in CSS format? It makes It think a little more simple if you're used to working in excel.
For example
.box {
display: grid;
grid-template-columns: 50% 50%
grid-template-rows: 50% 50%
}

You can skip all that position display and margin as well as padding if you just set a number in the row or column and put in the exact spot up to the numbers on the template.
.box-child {
grid-row: 2;
grid-column: 2;
}
This would put it in the second percentage to the right and the second percentage to bottom

Basic form in react

davidka7 — Sun, 08 Nov 2020 01:39:13 +0000

Good real Time practice algorithm

davidka7 — Sun, 01 Nov 2020 01:12:55 +0000

Recently in my internship, I came across making a form in a certain component. I got stuck on making a dropdown where you can choose the start time and end time. But there was a bigger issue no matter where I looked online it was hard to find a good guide on what to do. And I wasn't allowed to use any dependencies to help. So I decided to make a real-time algorithm where when you press the dropdown it drops the whole time in 30-minute increments without writing a whole bunch of excess code. Just try it it is a fun practice.