LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code



What is this!???

Fight for net neutrality

Total Count: . . .

Your Count: 0

CSS
/* Start by making your CSS behave relatively well across browsers
Set the font-size on html to make the font update dynamically to the screen-size
The media query makes it so small screens aren't overblown with font
Since Bootstrap is being used, I won't normalize it. But feel free to customize to your heart's content
*/
html {
  font-size: 62.5%;
}

@media screen and (max-width: 480px) {
  html {
    font-size: 35%;
  }
  
}

body {
  background: red;
}

a, a:hover, a:active, a:visited {
  color: black;
}

button {
  -webkit-box-shadow: -2px 2px black;
          box-shadow: -2px 2px black; 
}

/* The #info element is very important so users know what your app is doing after all
Therefore, I have made a simple animation for when the page loads to make the element move
with the goal of getting people to click it and find out more
*/
@-webkit-keyframes getAttention {
    0% {
        opacity: 0;
        -webkit-transform: translateY(10px);
                transform: translateY(10px);
    }

    80% {
        opacity: 1;
        -webkit-transform: translateY(-10px);
                transform: translateY(-10px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
}
@keyframes getAttention {
    0% {
        opacity: 0;
        -webkit-transform: translateY(10px);
                transform: translateY(10px);
    }

    80% {
        opacity: 1;
        -webkit-transform: translateY(-10px);
                transform: translateY(-10px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
}

@-webkit-keyframes dots {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes dots {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.loading-dots {
  -webkit-animation: dots 1s ease-in-out;
          animation: dots 1s ease-in-out;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

#sec-dot {
  -webkit-animation-delay: .3s;
          animation-delay: .3s;
}

#third-dot {
  -webkit-animation-delay: .6s;
          animation-delay: .6s;
}

.title-box, .count-box {
  color: white;
}

.title-box {
  margin-top: 15%;
  margin-bottom: 2.5%;
}

.title {
  text-transform: uppercase;
  font-size: 8rem;
  border-bottom: 2.5px solid white;
}

.count-box {
  font-size: 3rem;
}

.buttons {
  margin-bottom: 25%;
}

.buttons button {
  margin-bottom: 1%;
  font-size: 2rem;
}

/* The .vex class is automatically applied by the vex library
This controls the modals that pop up when users click on certain buttons
See the client/app.js file for where vex is applied
But since the default modals appeared at the bottom of the screen,
add this to get them to appear near the top of the page so your site doesn't look broken
*/
.vex {
  position: absolute;
  top: 5%;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  max-width: 90%;
  font-size: 1.75rem;
}

/* Here is the element that receives the animation above */ 
#info {
  -webkit-animation: getAttention 1s ease-out;
          animation: getAttention 1s ease-out;
  -webkit-animation-fill-mode: backwards;
          animation-fill-mode: backwards;
  -webkit-animation-iteration-count: 3;
          animation-iteration-count: 3;
  color: black;
  font-size: 1.5rem;
  
  position: absolute;
  top: 2.5%;
  left: 85%;
  -webkit-transform: translate(-50%);
      -ms-transform: translate(-50%);
          transform: translate(-50%);
  
  padding: 1rem;
  background: rgba(255, 200, 255, .55);
  
  border: 2px solid black;
  cursor: pointer;
  -webkit-box-shadow: -2px 2px 5px rgba(0, 0, 0, .8);
          box-shadow: -2px 2px 5px rgba(0, 0, 0, .8);
}

#fight:hover {
  cursor: pointer;
  text-decoration: underline;
}
JS
// This is the code for getting your messages to the websockets server so the bot can tweet
// Also includes control over modals using the vex library
// And sets the localstorage so that every user can see how many times they've individually tweeted
// All references to bot-server.js are from my Githbub
// Check it out at https://github.com/thepunkprofessor/net-neutrality-twitter-bot to learn/clone 

// This sets the vex theme. See the vex documentation to see what other options are available. They're on github
vex.defaultOptions.className = 'vex-theme-default';

// Select elements 
let info = document.getElementById("info");
let totalCount = document.getElementById("totalCount")
let userCount = document.getElementById("userCount");
let fight = document.getElementById("fight");

// Here the localstorage is being accessed to get the "user-tweet" item
// If it doesn't exist yet, set the numTimes variable to 0 and parse it as a string
// The numTimes variable is what will be inserted into the actual HTML

let numTimes = localStorage.getItem("user-tweet");
if (numTimes === null) {
    numTimes = 0;
} else {
    numTimes = parseInt(numTimes, 10);
}

// Here is the count being inserted
userCount.textContent = "Your Count: " + numTimes.toString(10);


// This sets up a new websocket connection. The link in the constructor is my server
// Feel free to connect to it, but make sure to set up your own so that we can get 
// as many people tweeting as possible!
// See the bot-server.js file for how to handle the server side
let socket = new WebSocket("wss://hickory-area.glitch.me/");

// Console log any errors and let the user know with a nice modal that the connection hasn't occurred.
// There are lots that can go wrong here, so make sure you handle errors much better than I am here
socket.onerror = function(error) {
    console.log("WebSocket Error: " + JSON.stringify(error));
    vex.dialog.alert({
        message: "Damn, something went wrong :( Look in the console to see what the error is."
    })
};

// This establishes the connection to the server, letting the server know you wish to be subscribed 
// to any new data. This connection ends when the user leaves the site amd  
// reopened when they revisit or refresh
socket.addEventListener("open", function (event) {

});

// This is what will update the HTML whenever any user sends data to the server
// This is where the real-time functionality of the app comes in
// The message here just lets the server know you're sending data so it can respond 
// and update the count for everyone
socket.addEventListener("message", function (event) {
    totalCount.innerHTML = "Total Count: " + event.data;
});

// Here the message is dispatched. This occurs when the user clicks on the Tweet button
// The socket sends a nice message to my server letting me know that you are steadfast in your 
// dedication to the cause
// and allows for the server to now emit it's data back so everyone can see your commitment
// It also updates the localstorage to show your own personal contribution
// See the bot-server.js file for more info on how this gets handled server-side
fight.addEventListener("click", () => {
  socket.send("I Stand For Net Neutrality");

    numTimes++;
    localStorage.setItem("user-tweet", (numTimes).toString(10))

    userCount.textContent = "Your Count: " + numTimes.toString(10);
    
    // This shows a modal alert that gives feedback to the user
    // Replace my twitter account's url with your own if you decide
    // to set up your own twitter bot
    vex.dialog.alert({
        message: "Tweet Sent! Thanks For Taking Part In The Fight To Protect Net Neutrality. Click Again and Fight Some More! Then Check Out My Twitter To See Our Progress: https://twitter.com/punk_professor?lang=en"
    });
});

// This also shows a modal alert that gives info on the app
// This is very important so your user actually understands what the app is doing
info.addEventListener("click", () => {
    vex.dialog.alert({
        message: 'I built a Twitter Bot that tweets "X people and I say "Fuck Ajit Pai". We stand for #netneutrality Retweet if you do too! goo.gl/QvSoiY`" with a link to a site dedicated to getting people in touch with their government representatives to show their dissent for the new regulations. The X here is you and all people who think like you and I do. You will find the total people that have helped fight the cause, as well as your specific contribution below. Net Neutrality is no joke, I strongly urge you to help protect it in any way you can. I have also included a link to my Github where you can find the server code to make your own bot and spread the word. Let\'s get a swarm going!'
    });
});

Description

Net Neutrality is about to come to an end. I built a twitter bot to show our protest. This app connects to a websockets server which sends out a Tweet telling Mr. Ajit Pai to respectfully go fuck himself. Fork this pen and make your own. Go to my Github repo to find out how to set up the server! Let's show those fuckers that we won't keep silent
Term
Wed, 12/27/2017 - 07:01

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv