Building Reusable React Components Using Tailwind — Smashing Magazine

Animate header on scroll with Next.js & TailwindCSS

const [animateHeader, setAnimateHeader] = useState(false)

useEffect(() => {
  const listener = () =>
  window.scrollY > 140 ? setAnimateHeader(true) : setAnimateHeader(false)
  window.addEventListener('scroll', listener)
  return () => {
    window.removeEventListener('scroll', listener)
  }
}, [])

// Example usage with TailwindCSS:
<div className={`bg-header/75 transition duration-500 ease-in-out ${animateHeader && 'bg-header/[0.95]'}`}>...</div>

#alpinejs #tailwind

Back to top button alpineJS + TailwindCSS

<button x-cloak x-data="{scroll : false}" @scroll.window="document.documentElement.scrollTop > 20 ? scroll = true : scroll = false" x-show="scroll" @click="window.scrollTo({top: 0, behavior: 'smooth'})" type="button" data-mdb-ripple="true" data-mdb-ripple-color="light" class="fixed inline-block p-3 text-xs font-medium leading-tight text-white uppercase transition duration-150 ease-in-out bg-blue-600 rounded-full shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg bottom-5 right-5" id="btn-back-to-top" x-transition.opacity>
        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z" clip-rule="evenodd" />
        </svg>
</button>

##js ##javascript ##vanillajs ##dates ##formatting

JavaScript Dates

//* DATE
let currentYear = new Date().getFullYear().toString()
let currentMonth = (new Date().getMonth() +1).toString()
let currentDay = new Date().getDate().toString()
currentMonth.length == 1 ? currentMonth = '0'+currentMonth : currentMonth = currentMonth.toString()
currentDay.length == 1 ? currentDay = '0'+currentDay : currentDay = currentDay.toString()
let yyyymmddToday = [currentYear, currentMonth, currentDay].join("-");
console.log('yyyymmddToday', yyyymmddToday);




// Get date
let date = new Date();

// Format variable named 'date' as MM/DD/YYYY
formatDateMDY() {
  return (
    this.date.slice(0, 10).split("-")[1] +
    "/" +
    this.date.slice(0, 10).split("-")[2] +
    "/" +
    this.date.slice(0, 10).split("-")[0]
    );
   },


// Get today's date in the default format string: '2020-10-11T00:00:00+05:30'
let date = new Date();

// Format as MM/DD/YYYY
let monthDateYear = ((date.getMonth() > 8) ? (date.getMonth() + 1) : ('0' + (date.getMonth() + 1))) + '/' + ((date.getDate() > 9) ? date.getDate() : ('0' + date.getDate())) + '/' + date.getFullYear();
console.log(monthDateYear)

// Pad Numbers (as seen in UnixIsoDate)
let zeroFill = ( number, width ) => {
  width -= number.toString().length;
  if ( width > 0 )
  {
    return new Array( width + (/\./.test( number ) ? 2 : 1) ).join( '0' ) + number;
  }
  return number + ""; // always return a string
}

// Unix date to ISO
let unixToIsoDate = (unixDate) => {
  let month = new Date(unixDate * 1000).getUTCDate()
  let day = new Date(unixDate * 1000).getUTCMonth()
  let year = new Date(unixDate * 1000).getUTCFullYear()
  // YYYY-MM-DD: return [year, zeroFill(month,2), zeroFill(day,2)].join('-')
  // m/d/y: return [month, day, year].join('/')
}

##learnjs ##learnjavascript ##javascript ##completehandbook ##handbook

The Complete JavaScript Handbook. JavaScript is one of the most popular… | by Flavio Copes | freeCodeCamp.org | Medium

The Complete JavaScript Handbook

##javascript

A simple guide to JavaScript concurrency in Node.js | TSH.io

A simple guide to JavaScript concurrency in Node.js and a few traps that come with it

##javascript

3 types of function

//Named function 
function multiply() {
    var result = 3 * 4; 
    console.log("3 multiplied by 4 is ", result);
}
multiply()

//anonymous function 
var divided = function() {
    var result = 10 / 2; 
    console.log("10 divided by 2 is ", result)
}
divided(); 

//Immediately invoked functional expressions
(function() {
    var result = 3 + 4; 
    console.log("3 plus 4 is: ", result)
}())

##javascript

JavaScript example #1

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        function MyExa1() {
            //display output
            var output1 = document.getElementById("output1");
            output1.innerHTML = "Hello PD2<br /> Your age is 100<br />";
        }

        function MyExa2() {
            //get inputs and display outputs
            var uName, uAge; //undefined
            uName = document.getElementById("uName").value;
            uAge = document.getElementById("uAge").value;
            document.getElementById("output2").innerHTML = ("Hello" + uName + "<br /> Your age is " + uAge + "< br />"); 

        }

        function myExa3() {
            //get inputs, calculate and display result
            var num1, num2, total;
            num1 = document.getElementById("num1").value;
            num2 = document.getElementById("num2").value;
            total = Number(num1) + Number(num2); 
            document.getElementById("output3").innerHTML = ("The total is" + total);



        //    num1 = prompt("Enter the first number");
        //    num2 = prompt("Enter the second number");
        //    //total = (num1 - 0) + (num2 - 0);
        //    total = Number(num1) + Number(num2);
        //    documen.write("The total is " + total);
        }



    </script>
</head>
<body>
    <fieldset>
        <button onclick="MyExa1()"> Call the first function</button>
        <p id="output1"></p>
    </fieldset>
    <fieldset>
        <button onclick="MyExa2()"> Call the second function</button>
        <label>Enter Your Name</label>
        <input type="text" id="uName" />
        <br />
        <label>Enter Your Age</label>
        <input type="number" id="uAge" />
        <br />
        <p id="output2"></p>
    </fieldset>

    <fieldset>
        <button onclick="myExa3()"> Call the third function</button>
        <br/> 
        <label>Enter the first number</label>
        <input type="number" id="num1" /> 
        <br/>
        <label>Enter the second number</label>
        <input type="number" id="num2" />
        <br />
        <p id="output3"></p>
    </fieldset>
</body>
</html>



<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <script>
        //display output 
        //document.write("Hello PD2<br /> Your age is 100<br />")

        //get inputs and display outputs
        //var uName, uAge; //undefined
        //uName = prompt("Enter your name"); //string 
        //uAge = prompt("Enter your age", "18"); //string 
        //document.write("Hello" + uName + "<br />Your age is " + uAge + "< br />");

        //get inputs, calculate and display result 
        var num1, num2, total; 
        num1 = prompt("Enter the first number");
        num2 = prompt("Enter the second number");
        total = (num1 - 0) + (num2 - 0); 
        //or
        total = Number(num1) + Number(num2); 
        documen.write("The total is " + total); 
    </script>
</body>
</html>



<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        function MyExa1() {
            //display output
            document.write("Hello PD2<br /> Your age is 100<br />")
        }

        function MyExa2() {
            //get inputs and display outputs
            var uName, uAge; //undefined
            uName = prompt("Enter your name"); //string
            uAge = prompt("Enter your age", "18"); //string
            document.write("Hello" + uName + " <br />Your age is " + uAge + "< br />");

        }

        function myExa3() {
            //get inputs, calculate and display result
            var num1, num2, total;
            num1 = prompt("Enter the first number");
            num2 = prompt("Enter the second number");
            //total = (num1 - 0) + (num2 - 0);
            total = Number(num1) + Number(num2);
            document.write("The total is " + total);
        }

            



    </script>
</head>
<body>
    <fieldset>
    <button onclick="MyExa1()"> Call the first function</button>
    <p id="output1"></p>
    </fieldset>
    <fieldset>
        <button onclick="MyExa2()"> Call the second function</button>
        <label>Enter Your Name</label>
        <input type="text" id="uName" />
        <br />
        <label>Enter Your Age</label>
        <input type="number" id="uAge" />
        <br/>
        <p id="output2"></p>
    </fieldset>

    <fieldset>
    <button onclick="myExa3()"> Call the third function</button>
        </fieldset>
</body>
</html>

##javascript

Table Style CSS

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="TableStyle.css" rel="stylesheet" />
</head>
<body>
    <h1>Thank you for submitting the form</h1>
    
    <table>
        <tr>
            <th colspan="2">CONTACT DETAILS</th>
        </tr>
        <tr>
            <th>Location</th>
            <th>Phone</th>
        </tr>
        <tr>
            <td>Sydney</td>
            <td>1111-1111</td>
        </tr>
        <tr>
            <td>Melbourne</td>
            <td>2222-1111</td>
        </tr>
        <tr>
            <td>Sydney</td>
            <td>1111-1111</td>
        </tr>
        <tr>
            <td>Melbourne</td>
            <td>2222-1111</td>
        </tr>
    </table>
</body>
</html>



table{
    width:100%; 
    border-collapse:collapse; 
}

table, th, td{
    border:1px solid black; 
}

td{
    height:50px; 
}

tr:nth-child(odd){
    background-color:#f2f2f2; 
}

##javascript

Web Application Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>form calculator</title>
	<script src="MyScript.js"></script>
</head>

<body>
<h1>Products ordering form</h1>
<p>Simply enter the number of products and item price to find out the total price of your order</p>
<form onsubmit="return calcTotal()" action="#" method="post" id="calcForm">
	
	<p>
		<label for="quantity">Enter number of products wanted:</label>
        	<input name="quantity" id="quantity" />
		
	</p>
	<p>
		<label for="price">Enter price of product wanted:</label>
        	<input name="price" id="price" />
		
	</p>
	<p>
		<input value="Total price" type="submit">  <!--Just to send another page -->
	</p>
</form>
    <div id="message"></div>
</body>
</html>



function calcTotal() {
    //get inputs - qty and item price

    var qty = document.getElementById("quantity").value;
    var price = document.getElementById("price").value;

    //validation - missing inputs, non-digit inputs, negative numbers
     if (qty == "" || price == "") {
        document.getElementById("message").innerHTML = "Missing inputs";
    }

    else if (isNaN(qty) || isNaN(price)) {
        document.getElementById("message").innerHTML = "Digits only";
    }
    else if (qty < 0 || price < 0) {
        document.getElementById("message").innerHTML = "Positive numbers only";
    }
    else {
         //calc - find the total price = qty * item price 
        var totalPrice = qty * price;
        // display the output total price 
        document.getElementById("message").innerHTML = "Total price is " + totalPrice;
    } 
    return false; //prevent form submission 

    //calc - find the total price = qty * item price 

    var totalPrice = qty * price; 

    // display the output total price 

    document.getElementById("message").innerHTML = "Total price is " + totalPrice; 

    return false; //prevent from submission 
}

##javascript

JavaScript example #2

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <script>
        
        //var arr = ['1', '2', '3', '4', '5']; 

        //for (var i = 0; i < arr.length; i++)
        //{
        //    document.write(arr[i] + '<br/>'); 
        //}

        //while (i < arr.length) {
        //    document.write(arr[i] + "<br/>")
        //i++; 
        //}

        //var x;
        //for (x in arr) {
        //    document.write(arr[x] + "<br/>"); 
        //}



        //for (var i = 0; i < 5; i++) {
        //    var s = Console.ReadLine(); 
        //    s = 


        //}

        //var num = [1, 2, 3, 4, 5];
        //var total = 0; 

        //for (var n in num) {
        //    total += MyNums[n];
        //}
        //document.write(total)
        //document.write(total / arr.length)); 

        var num = [];
        var total = 0; 
        for (var i = 0; i < 5; i++) {
            num[1] = Number(prompt('Enter a number'));
            document.write(num[i] + ' ');
            total += num[i];
        }
        document.write('<br/>Total: ' + total + '<br/>');
        document.write('Average: ' + (total / num.length) + '<br/>'); 

         

    </script>

</body>
</html>

##javascript

JavaScript example #3

<!DOCTYPE html>
<html>

<head>
<script type="text/javascript" src="ValidateForm.js"></script>
<link type="text/css" href="formstyle.css" rel="stylesheet"/>
</head>

<body>

<form onsubmit="return validateAll(this)" action="#" method="post">
	<label id="lblName" for="txtName">Name</label><input id="txtName" type="text" class="valid" onblur="return validateNonEmpty(this, txtName_Help)"/><span id="txtName_Help"></span><br />
	<label id="lblAddress" for="txtAddress">Address</label><input id="txtAddress" type="text" class="valid" onblur="return validateNonEmpty(this, txtAddress_Help)"/><span id="txtAddress_Help"></span><br />
	<label id="lblPCode" for="txtPCode">Postcode</label><input id="txtPCode" type="text" class="valid" onblur="return validatePCode(this, txtPCode_Help)"/><span id="txtPCode_Help"></span><br />
	<label id="lblPhone" for="txtPhone">Phone</label><input id="txtPhone" type="text" class="valid" onblur="return validateNonEmpty(this, txtPhone_Help)" /><span id="txtPhone_Help"></span><br />
	<input name="Submit1" type="submit" value="submit" /><input name="Reset1" type="reset" value="reset"/></form>

</body>

</html>



label{
	display:inline-block;
	width:100px;
}
input.valid
{
	background: #dddddd; 
}
input.invalid  
{
	background: #faa; 
}




function validateNonEmpty(tf, helpText) {
    var value = tf.value;
    if (value) {
        tf.className = "valid";
        helpText.innerHTML = " ";
        return true; //valid - not empty 
    }
    else {
        tf.className = "invalid";
        helpText.innerHTML = "Empty input"; //error msg 
        return false; //invalud = empty 
    }


}

function validateAll(form) {
    var success = true; 
    for (var i = 0; i < form.elements.length; i++) {
        var e = form.elements[i]; 
        if (e.onblur) //if onblur event attribute is not emoty
        {
            //trigger the valdation 
            success = e.onblur() && success; 
        }
    }
    return success; 
}

function validatePCode(tf, helpText) {
    //check if the value is empty 
    var isNotEmpty = validateNonEmpty(tf, helpText); 
    if (isNotEmpty == false) {
        return false; 
    }
    //check if the value contains 4 digits
    var value = tf.value; 
    //var regex = /^\d{4}&/;
   // var regex = new RegExp("ABC"); //CONTAINTS ABC 
   // var regex = /^ABC$/; //exactly ABC
    //var regex = /A[ABC]C/; //CONTAINS EITHER AAC, ABC OR ACC
   // var regex = /^A[ABC]/; //STARTS WITH A FOLLOWED BY EITHER A,B OR C 
    //var regex = /[ABC]A$/; //SECOND LAST CHAR IS EITHER A,B OR C & LAST CHAR IS A 
   // var regex = /A[A-C]C/; //CONTAINS EITHER AAC, ABC, ACC
   // var regex = /^A.C$/; //3 chars that starts with a, followed by any char ends with c 
   // var regex = /CA{3}T/; //CONTAINS CAAAT
    var regex = /CA{2,}T/; //CONTAINTS c, followed by 
    var regex = /CA{2, 5}T/; //


    var is4Digits = regex.test(value);
    if (is4Digits) {
        tf.className = "valid";
        helpText.innerHTML = " ";
        return true; //valid - 4 digits
    }
    else {
        tf.className = "invalid";
        helpText.innerHTML = "Invalid postcode"; //error msg 
        return false; //invalud = empty 
    }

}

##javascript

JavaScript Exercise #1

/* Write a JavaScript program to display the 
current day and time in the following format.
Today is : Tuesday. 
Current time is : 10 PM : 30 : 38 */ 

var today = new Date(); 
var day = today.getDay(); 
var daylist = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
document.getElementById("demo").innerHTML = "Today is : " + daylist[day] + "." 
//console.log("Today is : " + daylist[day] + "."); 

var hour = today.getHours();
var minutes = today.getMinutes();
var seconds = today.getSeconds(); 
var prepand = (hour >= 12)? "PM ":" AM "; 
hour = (hour >= 12)? hour - 12: hour; 
if (hour===0 && prepand=== "PM ")
{
if (minute===0 && seconds===0)
{
hour=12; 
prepand=' Noon';
}
else 
{
hour=12; 
prepand= ' PM'; 
} 
}
if (hour===0 && prepand===' AM')
{
if (minutes===0 && second===0)
{
hour=12;
prepand=' Midnight';
}
else 
{
hour=12;
prepand= ' AM';
}
}
//console.log("Current Time: " + hour + prepand + " : " + minutes + " : " + seconds); 
document.getElementById("demo1").innerHTML = "Current Time: " + hour + prepand + " : " + minutes + " : " + seconds

##jspsych ##javascript ##psiturk

sample-jspsych-psiturk-experiment/jspsych.js at master · jspsych/sample-jspsych-psiturk-experiment

   jsPsych.dataAPI = (function() {
        
        var module = {};
        
        // core.dataAsCSV returns a CSV string that contains all of the data
        //      append_data is an option map object that will append values
        //      to every row. for example, if append_data = {"subject": 4},
        //      then a column called subject will be added to the data and
        //      it will always have the value 4.
        module.dataAsCSV = function(append_data) {
            var dataObj = jsPsych.data();
            return JSON2CSV(flattenData(dataObj, append_data));
        };

        module.localSave = function(filename, format, append_data) {
            
            var data_string;
            
            if(format == 'JSON' || format == 'json') {
                data_string = JSON.stringify(flattenData(jsPsych.data(), append_data));
            } else if(format == 'CSV' || format == 'csv') {
                data_string = module.dataAsCSV(append_data);
            } else {
                throw new Error('invalid format specified for jsPsych.dataAPI.localSave');
            }
            
            saveTextToFile(data_string, filename);
        };
        
        module.getTrialsOfType = function(trial_type){
            var data = jsPsych.data();
            
            data = flatten(data);
            
            var trials = [];
            for(var i = 0; i < data.length; i++){
                if(data[i].trial_type == trial_type){
                    trials.push(data[i]);
                }
            }
            
            return trials;
        };
        
        module.displayData = function(format) {
            format = (typeof format === 'undefined') ? "json" : format.toLowerCase();
            if(format != "json" && format != "csv") {
                console.log('Invalid format declared for displayData function. Using json as default.');
                format = "json";
            }
            
            var data_string;
            
            if(format == 'json') {
                data_string = JSON.stringify(flattenData(jsPsych.data()), undefined, 1);
            } else {
                data_string = module.dataAsCSV();
            } 
            
            var display_element = jsPsych.getDisplayElement();
            
            display_element.append($('<pre>', {
                html: data_string
            }));
        }
        
        // private function to save text file on local drive
        function saveTextToFile(textstr, filename) {
            var blobToSave = new Blob([textstr], {
                type: 'text/plain'
            });
            var blobURL = "";
            if (typeof window.webkitURL !== 'undefined') {
                blobURL = window.webkitURL.createObjectURL(blobToSave);
            }
            else {
                blobURL = window.URL.createObjectURL(blobToSave);
            }
            
            var display_element = jsPsych.getDisplayElement();
            
            display_element.append($('<a>', {
                id: 'jspsych-download-as-text-link',
                href: blobURL,
                css: {
                    display: 'none'
                },
                download: filename,
                html: 'download file'
            }));
            $('#jspsych-download-as-text-link')[0].click();
        }
        
        //
        // A few helper functions to handle data format conversion
        //
        function flattenData(data_object, append_data) {

            append_data = (typeof append_data === undefined) ? {} : append_data;

            var trials = [];

            // loop through data_object
            for (var i = 0; i < data_object.length; i++) {
                for (var j = 0; j < data_object[i].length; j++) {
                    var data = $.extend({}, data_object[i][j], append_data);
                    trials.push(data);
                }
            }

            return trials;
        }

##javascript ##jspsych ##psiturk

short data save task.js (via psiturk data save)

	psiTurk.showPage('postquestionnaire.html');
	psiTurk.recordTrialData({'phase':'postquestionnaire', 'status':'begin'});
	
	$("#next").click(function () {
	    record_responses();
	    psiTurk.saveData({
            success: function(){
                psiTurk.computeBonus('compute_bonus', function() { 
                	psiTurk.completeHIT(); // when finished saving compute bonus, then quit
                }); 
            }, 
            error: prompt_resubmit});
	});

##javascript ##n8n

Split Items Of Array For N8N Function

return items[0].json.map(item => {
  return {
    json: item
  }
});

Building Reusable React Components Using Tailwind — Smashing Magazine

Save snippets that work from anywhere online with our extensions

Comments

More like this

Browse more snippets >>

Building Reusable React Components Using Tailwind — Smashing Magazine

Save snippets that work from anywhere online with our extensions

Comments

More like this

Browse more snippets >>

Embed code snippet