Add Code to HTML by Manipulating the DOM
content_copy
dashboard

#html #javascript 

const randomElement = document.getElementById('someElement');
randomElement.innerHTML = '<p>changing the DOM</p>'

Live Search Bar on Website
content_copy
dashboard

#javascript 

(function(){
    //
    var $posts = $('#posts li');
    var $search = $('#search');
    var cache = [];

    $posts.each(function(){
        cache.push({
            element: this,
            title: this.title.trim().toLowerCase(),
        });
    });

    function filter(){
        var query = this.value;
        console.log("query is "+query);
        cache.forEach(function(post){
            var index = 0;

            if (query) {
                index = post.title.indexOf(query);

            }
            var results = document.getElementsByClassName('search-results');
            results.innerHTML = "<li>"+cache.title+"</li>";
            post.element.style.display = index === -1 ? 'none' : '';
        });
    }

   if ('oninput' in $search[0]){
        $search.on('input', filter);
    } else {
        $search.on('keyup', filter);
    }

}());

How to Select All Elements with jQuery
content_copy
dashboard

#javascript 

var allElements = $("*");

How to Select Specific Elements with jQuery
content_copy
dashboard

#javascript 

var blogHeaders = $("h2");
8

Slugify a Field in Mongoose Schema
content_copy
dashboard

#javascript #nodejs 

var mongoose = require('mongoose');
var Schema = mongoose.Schema;
var slug = require('mongoose-slug-generator');

mongoose.plugin(slug);

const pageSchema = new Schema({
    title: { type: String , required: true},
    slug: { type: String, slug: "title" }
});

var Page = mongoose.model('Page', pageSchema);
module.exports = Page;
3

Copy Text to Clipboard with Line Breaks
content_copy
dashboard

#javascript 

function copyToClipboard(){

    var codeToBeCopied = document.getElementById('code-snippet').innerText;
    var emptyArea = document.createElement('TEXTAREA');
    emptyArea.innerHTML = codeToBeCopied;
    const parentElement = document.getElementById('post-title');
    parentElement.appendChild(emptyArea);

    emptyArea.select();
    document.execCommand('copy');

    parentElement.removeChild(emptyArea);
    M.toast({html: 'Code copied to clipboard'})

    }

Search inside an array
content_copy
dashboard

#javascript #nodejs 

const songs[];
const results;

for (var i, i++, i<songs.length){
    if(song[i].artist == "Drake"){
      result.push(songs[i]);
    };

// OR

const songs [];
const result = songs.filter ( song => song.artist == "Drake");
36

Append a Value to an Array
content_copy
dashboard

#javascript #nodejs 

db.students.update(
   { _id: 1 },
   { $push: { scores: 89 } }
)

How to Access Clicked Element From an Array With the Same Class
content_copy
dashboard

#javascript 

var allActionButtons = document.getElementsByClassName("action-buttons");

for (var i = 0; i < allActionButtons.length; i++) {

  allActionButtons[i].addEventListener('click', functionToRunWhenClicked, false);

}

var functionToRunWhenClicked = function {
  // Add some stuff here
}

How to Detect a HTML Element Has a Class
content_copy
dashboard

#html #javascript 

var newForm = document.getElementById('new-form');

if ( newForm.getAttribute('class') === 'make-blue' ) {
        //  Do something
    }
16

How to Save HTML Form Data in JSON - Express
content_copy
dashboard

#html #javascript #nodejs 

<form action="/new" method="post">
 
  <input name="title" type="text">
  <input name="description" type="text">
  <button type="submit">Submit Form</button>
 
</form>
> More steps
-116

Responsive Modal Image Gallery using HTML and CSS
content_copy
dashboard

#css #html #javascript 

<h2 style="text-align:center">Modal Image Gallery</h2>
<div class="row">
  <div class="column">
    <img src="placeholder.png" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">
  </div>
  <div class="column">
    <img src="placeholder.png" style="width:100%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
  </div>
  <div class="column">
    <img src="placeholder.png" style="width:100%" onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
  </div>
  <div class="column">
    <img src="placeholder.png" style="width:100%" onclick="openModal();currentSlide(4)" class="hover-shadow cursor">
  </div>
</div>
<div id="myModal" class="modal">
  <span class="close cursor" onclick="closeModal()">&times;</span>
  <div class="modal-content">
    <div class="mySlides">
      <div class="numbertext">1 / 4</div>
      <img src="placeholder.png" style="width:100%">
    </div>
    <div class="mySlides">
      <div class="numbertext">2 / 4</div>
      <img src="placeholder.png" style="width:100%">
    </div>
    <div class="mySlides">
      <div class="numbertext">3 / 4</div>
      <img src="placeholder.png" style="width:100%">
    </div>
    <div class="mySlides">
      <div class="numbertext">4 / 4</div>
      <img src="placeholder.png" style="width:100%">
    </div>
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>
    <div class="caption-container">
      <p id="caption"></p>
    </div>
    <div class="column">
      <img class="demo cursor" src="placeholder.png" style="width:100%" onclick="currentSlide(1)" alt="Sample image 1">
    </div>
    <div class="column">
      <img class="demo cursor" src="placeholder.png" style="width:100%" onclick="currentSlide(2)" alt="Sample image 2">
    </div>
    <div class="column">
      <img class="demo cursor" src="placeholder.png" style="width:100%" onclick="currentSlide(3)" alt="Sample image 3">
    </div>
    <div class="column">
      <img class="demo cursor" src="placeholder.png" style="width:100%" onclick="currentSlide(4)" alt="Sample image 4">
    </div>
  </div>
</div>
> More steps
10

Replace Textarea with Codemirror editor
content_copy
dashboard

#javascript 

<link rel="stylesheet" type="text/css" href="plugin/codemirror/lib/codemirror.css">

<body>
	<textarea class="codemirror-textarea"></textarea>
</body>

<script>

$(document).ready(function(){
    var codeText = $(".codemirror-textarea")[0];
    var editor = CodeMirror.fromTextArea(codeText, {
        lineNumbers : true
    });
});

</script>

<script type="text/javascript" src="plugin/codemirror/lib/codemirror.js"></script>
1

Save to MongoDB without Duplicates Using Mongoose
content_copy
dashboard

#javascript #nodejs 

var mongoose = require('mongoose');
var Schema = mongoose.Schema;

const exampleSchema = new Schema({
    title: { type: String , required: true},
    content: [{type: String}]
});


var Example = mongoose.model('Example', exampleSchema);
module.exports = Example;
> More steps

Open Mobile Sidebar on button click
content_copy
dashboard

#html #javascript 

<button id="open-sesame">Open</button>

                <script>
                    var openSesame = document.getElementById('open-sesame');
                    openSesame.addEventListener("click", function(){
                        $('.sidenav').sidenav('open');
                    });
                </script>

Select Element with ID using jQuery
content_copy
dashboard

#javascript 

<h2 id="lastHeading">Thank you for reading</h2>
> More steps

Select Elements with Class Attribute using jQuery
content_copy
dashboard

#javascript 

<h2 class="redHeading">Welcome</h2>
<p>A passage of text</p>
<h2 class="redHeading">Thank you</h2>
> More steps
1

HTTPS Redirect in Nodejs
content_copy
dashboard

#javascript #nodejs #commandline 

npm install heroku-ssl-redirect
> More steps

Vue Widget to generate CRON expressions
content_copy
dashboard

#javascript 

          <!-- Intuitive Cron format input -->
          <label> Reportes Programados </label>
          <md-button-toggle md-single>
            <md-tooltip md-direction="bottom">Los reportes se pueden enviar periodicamente (cada cierto tiempo cada ciertos dias) o a una hora fija cada ciertos dias.</md-tooltip>
            <md-button v-on:click='cron_type="periodically"' v-bind:class='{"md-toggle": cron_type == "periodically"}'> <md-icon>publish</md-icon> Periodicamente </md-button>
            <!-- <md-button v-on:click='cron_type="timeFrame"' v-bind:class='{"md-toggle": cron_type == "timeFrame"}'> <md-icon>publish</md-icon> Periodicamente en un rango de tiempo</md-button> -->
            <md-button v-on:click='cron_type="fixedTime"' v-bind:class='{"md-toggle": cron_type == "fixedTime"}'> <md-icon>publish</md-icon> Hora fija recurrente </md-button>
          </md-button-toggle>

          <div v-if="cron_type==='periodically'">
            <md-button-toggle md-single>
              <md-button v-on:click='periodicity="minutes"' v-bind:class='{"md-toggle": periodicity == "minutes"}'> Minutos </md-button>
              <md-button v-on:click='periodicity="hours"' v-bind:class='{"md-toggle": periodicity == "hours"}'> Horas </md-button>
            </md-button-toggle>

            <md-input-container>
              <md-tooltip md-direction="bottom">Cada cuantos minutos será enviado el reporte.</md-tooltip>
              <label v-if="periodicity=='minutes'">¿Cada cuantos minutos?</label>
              <label v-if="periodicity=='hours'">¿Cada cuantas horas?</label>
              <md-input v-if="periodicity=='minutes'" numeric v-model='every_x_minutes'></md-input>
              <md-input v-if="periodicity=='hours'" numeric v-model='every_x_hours'></md-input>
            </md-input-container>  

            <md-button-toggle md-single>
              <md-button v-on:click='day_type="week_days"' v-bind:class='{"md-toggle": day_type == "week_days"}'> Días de la semana </md-button>
              <md-button v-on:click='day_type="month_days"' v-bind:class='{"md-toggle": day_type == "month_days"}'> Días del mes </md-button>
            </md-button-toggle>

            <md-input-container v-if="day_type=='week_days'">
              <md-tooltip md-direction="bottom">Día en que será enviado el reporte. Deje en blanco para que sea ninguno</md-tooltip>
              <label >¿Qué día de la semana?</label>
                <md-select v-model="week_day" placeholder="Día de la semana">
                  <md-option value='1'>Lunes</md-option>
                  <md-option value='2'>Martes</md-option>
                  <md-option value='3'>Miércoles</md-option>
                  <md-option value='4'>Jueves</md-option>
                  <md-option value='5'>Viernes</md-option>
                  <md-option value='6'>Sábado</md-option>
                  <md-option value='7'>Domingo</md-option>
                  <md-option value="*">Todos los días</md-option>
                </md-select>
            </md-input-container>  

            <md-input-container v-if="day_type=='month_days'">
              <md-tooltip md-direction="bottom">Día en que será enviado el reporte.</md-tooltip>
              <label >¿Qué día del mes?</label>
              <md-input numeric v-model='month_day'></md-input>
            </md-input-container>  
          </div>

          <div v-else>
            <md-input-container>
              <md-tooltip md-direction="bottom">Hora a la que el reporte será enviado en los días deseados</md-tooltip>
              <label >¿A qué hora?</label>
                <md-select v-model="recurrent_fixed_time" placeholder="Hora del día">
                  <md-option value='0'>Media noche</md-option>
                  <md-option value='1'>1:00 AM</md-option>
                  <md-option value='2'>2:00 AM</md-option>
                  <md-option value='3'>3:00 AM</md-option>
                  <md-option value='4'>4:00 AM</md-option>
                  <md-option value='5'>5:00 AM</md-option>
                  <md-option value='6'>6:00 AM</md-option>
                  <md-option value="7">7:00 AM</md-option>
                  <md-option value="8">8:00 AM</md-option>
                  <md-option value="9">9:00 AM</md-option>
                  <md-option value="10">10:00 AM</md-option>
                  <md-option value="11">11:00 AM</md-option>
                  <md-option value="12">Medio día</md-option>
                  <md-option value="13">1:00 PM</md-option>
                  <md-option value="14">2:00 PM</md-option>
                  <md-option value="15">3:00 PM</md-option>
                  <md-option value="16">4:00 PM</md-option>
                  <md-option value="17">5:00 PM</md-option>
                  <md-option value="18">6:00 PM</md-option>
                  <md-option value="19">7:00 PM</md-option>
                  <md-option value="20">8:00 PM</md-option>
                  <md-option value="21">9:00 PM</md-option>
                  <md-option value="22">10:00 PM</md-option>
                  <md-option value="23">11:00 PM</md-option>
                </md-select>
            </md-input-container>  

            <md-button-toggle md-single>
              <md-button v-on:click='day_type="week_days"' v-bind:class='{"md-toggle": day_type == "week_days"}'> Días de la semana </md-button>
              <md-button v-on:click='day_type="month_days"' v-bind:class='{"md-toggle": day_type == "month_days"}'> Días del mes </md-button>
            </md-button-toggle>

            <md-input-container v-if="day_type=='week_days'">
              <md-tooltip md-direction="bottom">Día en que será enviado el reporte. Deje en blanco para que sea ninguno</md-tooltip>
              <label >¿Qué día de la semana?</label>
                <md-select v-model="week_day" placeholder="Día de la semana">
                  <md-option value='1'>Lunes</md-option>
                  <md-option value='2'>Martes</md-option>
                  <md-option value='3'>Miércoles</md-option>
                  <md-option value='4'>Jueves</md-option>
                  <md-option value='5'>Viernes</md-option>
                  <md-option value='6'>Sábado</md-option>
                  <md-option value='7'>Domingo</md-option>
                  <md-option value="*">Todos los días</md-option>
                </md-select>
            </md-input-container>  

            <md-input-container v-if="day_type=='month_days'">
              <md-tooltip md-direction="bottom">Día en que será enviado el reporte.</md-tooltip>
              <label >¿Qué día del mes?</label>
              <md-input numeric v-model='month_day'></md-input>
            </md-input-container>  
          </div>
> More steps
keyboard_arrow_up