Skip to main content

Rings and Rods

Nov 19, 2022CodeCatch
Loading...

More JavaScript Posts

typewriter-effect in Vanilla JS and React

Jan 25, 2023C S

0 likes • 7 views

// Vanilla JS Solution:
var app = document.getElementById('app');
var typewriter = new Typewriter(app, { loop: true });
typewriter
.typeString("I'm John and I'm a super cool web developer")
.pauseFor(3000)
.deleteChars(13) // "web developer" = 13 characters
.typeString("person to talk with!") // Will display "I'm John and I'm a super cool person to talk with!"
.start();
// React Solution:
import Typewriter from 'typewriter-effect';
<Typewriter
options={{ loop: true }}
onInit={typewriter => {
typewriter
.typeString("I'm John and I'm a super cool web developer")
.pauseFor(3000)
.deleteChars(13) // "web developer" = 13 characters
.typeString("person to talk with!") // Will display "I'm John and I'm a super cool person to talk with!"
.start();
}}
/>

Untitled

Aug 13, 2023CAS

1 like • 2 views

function sortNumbers(arr) {
return arr.slice().sort((a, b) => a - b);
}
const unsortedArray = [4, 1, 9, 6, 3, 5];
const sortedArray = sortNumbers(unsortedArray);
console.log("Unsorted Numbers:", unsortedArray);
console.log("\n");
console.log("Sorted Numbers:", sortedArray);

Extracting components

Nov 19, 2022CodeCatch

0 likes • 2 views

function formatDate(date) {
return date.toLocaleDateString();
}
function Comment(props) {
return (
<div className="Comment">
<div className="UserInfo">
<img
className="Avatar"
src={props.author.avatarUrl}
alt={props.author.name}
/>
<div className="UserInfo-name">
{props.author.name}
</div>
</div>
<div className="Comment-text">{props.text}</div>
<div className="Comment-date">
{formatDate(props.date)}
</div>
</div>
);
}
const comment = {
date: new Date(),
text: 'I hope you enjoy learning React!',
author: {
name: 'Hello Kitty',
avatarUrl: 'https://placekitten.com/g/64/64',
},
};
ReactDOM.render(
<Comment
date={comment.date}
text={comment.text}
author={comment.author}
/>,
document.getElementById('root')
);

Canvas File Downloader

Nov 18, 2022AustinLeath

0 likes • 4 views

results =
{
"11345240":"Media Comment-80e47004-1719-493a-af69-a43b2652b41c",
"11345282":"zoom_3_22_21.mp4",
"11345303":"Recording-2.m4a",
"11345348":"February 12%2C 2021.mp4",
"11345826":"Lecture_Rousso_Chapter_06-2.pptx",
"11345933":"Themes_InClassAssigment.pptx",
"11346193":"Agenda – Week of March23.pptx",
"11346318":"MUJS 2370 SP2021 Updated Rhythm Changes Drills Bb - Score.pdf",
"11346319":"MUJS 2370 SP2021 Updated Rhythm Changes Drills C - Score.pdf",
"11346322":"MUJS 2370 SP2021 Updated Rhythm Changes Drills Eb - Score.pdf",
"11346323":"MUJS 2370 Updated Rhythm Changes Drills Bass - Score.pdf",
"11346381":"Anthropology with colored highlighter analysis - Mar 22 2021 - 10-36 AM.pdf",
"11346449":"Anthropology with colored highlighter analysis - Mar 22 2021 - 10-36 AM.pdf",
"11346450":"MUJS 2370 SP2021 Updated Rhythm Changes Drills Bb - Score.pdf",
"11346451":"MUJS 2370 SP2021 Updated Rhythm Changes Drills C - Score.pdf",
"11346453":"MUJS 2370 SP2021 Updated Rhythm Changes Drills Eb - Score.pdf",
"11346454":"MUJS 2370 Updated Rhythm Changes Drills Bass - Score.pdf",
"11346495":"Steinel chromatic ornamentation étude rhythm changes - Aug 23 2020 - 12-19 PM.pdf",
"11346532":"Media Comment-136242b4-7f2c-4d5d-8aa4-091f07e797cf",
"11346581":"2019 Trust Based Relationship Intervention Manual.pdf",
"11346584":"TBRI ppt.pptx",
"11346593":"Trauma informed care.ppt"
}
function NewTab(testing) {
window.open(testing, "_blank");
}
for(test in results) {
var testing = 'https://unt.instructure.com/files/' + test + '/download';
NewTab(testing);
//window.open = 'https://unt.instructure.com/files/' + test + '/download';
}

geometric progression

Nov 19, 2022CodeCatch

0 likes • 0 views

const geometricProgression = (end, start = 1, step = 2) =>
Array.from({
length: Math.floor(Math.log(end / start) / Math.log(step)) + 1,
}).map((_, i) => start * step ** i);
geometricProgression(256); // [1, 2, 4, 8, 16, 32, 64, 128, 256]
geometricProgression(256, 3); // [3, 6, 12, 24, 48, 96, 192]
geometricProgression(256, 1, 4); // [1, 4, 16, 64, 256]

Truncate to fixed decimal

Nov 19, 2022CodeCatch

0 likes • 0 views

const toFixed = (n, fixed) => ~~(Math.pow(10, fixed) * n) / Math.pow(10, fixed);
// Examples
toFixed(25.198726354, 1); // 25.1
toFixed(25.198726354, 2); // 25.19
toFixed(25.198726354, 3); // 25.198
toFixed(25.198726354, 4); // 25.1987
toFixed(25.198726354, 5); // 25.19872
toFixed(25.198726354, 6); // 25.198726